Not able to show image in Diagonally split html page.Please check the code and let me know the issue

Question

I have created one HTML page which is diagonally split.I have put image in right side and some content and button in left.But i am facing 2 issue with my code

1- right side is not fixed and image is not coming properly. 2- The split is not happen for full page

code is here:-

HTML:-

body {
  margin: 0;
  font-size: 2em;
}

#landing-area {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#box-left {
  width: 50%;
  clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
  margin-right: -4.2vh;
  padding: 5px 11vh 5px 5px;
  background-color: #F4FCFF;
  text-align: center;
}

#box-right {
  width: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
  margin-left: -4.2vh;
  padding: 5px 5px 5px 11vh;
  text-align: center;
}

#middle-text {
  height: 200px;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 25%;
  margin-top: -100px;
  margin-left: -200px;
}

<body>
  <div id="landing-area">
    <div id="box-left">
      <div id="middle-text">
        <img src="images/logo.png">
        <h>Header goes here</h>
        <p>4 line paragraph goes here</p>
        <button>Button name</button></div>
    </div>
    <div id="box-right">
      <img src="images/landingPage.png">
    </div>
  </div>
</body>

Image:-

I want the page should be look like below

Could you clarify what 'image is not coming properly' means - do you want it more centered or something? Also 'split is not full page' - do you want the two side to meet just at the bottom? — A Haworth, Aug 03 '21 at 07:23
I want image to be fill complete in right hand side.I wanted complete split of the pages and one side should be Heading,Button and logo and in right side completed with image — jugal, Aug 03 '21 at 07:26
Thanks for the picture - that makes it much clearer. I assume the degree of slope you want it defined in your code by the use of 10vh for the horizontal offset. — A Haworth, Aug 03 '21 at 08:31

Dishant Bisht · Answer 1 · 2021-08-03T07:56:18.603

You can see the code from codepen. Visit https://codepen.io/chris22smith/pen/vvYBGY

HTML:-

<body>
<div class="view">
  <div class="left">
    <div class="sun"></div>
  </div>
  <div class="divider"></div>
  <div class="right">
    <div class="moon"></div>
  </div>
</div>
</body>

CSS:-

body {
  overflow:hidden;
}

.view {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:skew(-10deg);
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position:absolute;
  top:0;
}

.left { 
  left:-5%;  
  right:50%;  
}

.divider {
  background-color:#fc0;
  border-left:solid 2px #000;
  border-right:solid 2px #000;
  bottom:-5%;
  left:50%;
  position:absolute;
  right:50%;
  top:-5%;
  z-index:1;
}

.right {
  left:50%;
  right:-5%;
}

.sun,
.moon {
  bottom:-5%;
  left:-5%;
  position:absolute;
  right:-5%;
  top:-5%;
  transform:skew(5deg);
}

.sun {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
  background-position:center center;
  background-size:cover;
}

.moon {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
  background-position:center center;
  background-size:cover;
}

score 1 · Accepted Answer · answered Aug 03 '21 at 08:52

I suggest a slightly different approach because you want to be sure that your text etc within the left block will fit whatever the viewport width. One way of ensuring this is to have the left hand block at width 50% less 10vh. i.e. not try the complicaed business of getting text to fit within a sloping side.

This snippet gives the whole page the pale background color, the left block sized as above and the right block it gives width 50% plus 10vh and clips it (polygon is slightly altered to make it correct for this width).

body {
  margin: 0;
  font-size: 2em;
}

#landing-area {
  width: 100vw;
  height: 100vh;
  background-color: #F4FCFF;
  position: relative;
}

#box-left {
  width: calc(50% - 10vh);
  padding: 5px 11vh 5px 5px;
  text-align: center;
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
}

#box-right {
  width: calc(50% + 10vh);
  clip-path: polygon(10vh 0, 100% 0, 100% 100%, 0 100%);
  padding: 5px 5px 5px 11vh;
  text-align: center;
  background-image: url(https://picsum.photos/id/131/1024/768?blur=2);
  background-size: cover;
  background-position: center center;
  display: inline-block;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
}

#middle-text {
  height: 200px;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 25%;
  margin-top: -100px;
  margin-left: -200px;
}

<div id="landing-area">
  <div id="box-left">
    <div id="middle-text">
      <img src="images/logo.png">
      <h>Header goes here</h>
      <p>4 line paragraph goes here</p>
      <button>Button name</button></div>
  </div>
  <div id="box-right">
  </div>
</div>

Note: you'd need to make your px dimensions currently used for the text into relative ones so that the whole thing is responsive (this is true whether you use the method here or some other method).

Not able to show image in Diagonally split html page.Please check the code and let me know the issue

2 Answers2