Split the web page diagonally

Question

enter image description hereI'm a starter and looking for some help. I want to split the webpage diagonally. Can I do it solely with HTML and CSS? please throw me some suggestions.

take a look at this: https://stackoverflow.com/questions/30184622/trapezoid-div-in-css?noredirect=1&lq=1 — Akber Iqbal, Oct 01 '18 at 10:44

Jack Wright · Answer 1 · 2018-10-01T15:17:36.430

You can use the CSS clip-path attribute.

In your use I would use the:

clip-path: polygon();

attribute. This attribute allows you to define how pulled back a corner can be in elements. In this case, I used two divs and pulled their respected corners back to make them look diagonal.

Using

calc();

in my CSS allowed me to calculate a final value using a percentage and vh (viewport height) and that makes it so that different screen aspect ratios don't effect how skewed the diagonal line is.

When you use clip-path it literally cuts a chunk out of your div element. This means that text will be cut off. To remedy this, I added a padding to the left and right side of the respected divs to push the content in.

Also, the margin of the elements remain a rectangle. So you're cutting chunks out but that can create a diagonal gap in-between the elements. So, to push the elements together I deducted the margin away.

Lastly, clip-path cuts out borders too. So to create the orange line I used the wrapper div and set its background colour. I also kept the margins small enough to keep a gap between both div elements.

In the snippet I may have accidentally put the diagonal split the wrong way round... oops oh well! Just change the values to something else in the clip-path property. :)

Take a look.

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

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

 #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;
  background-color: #44325A;
  text-align: center;
 }

<body>
 <div id="landing-area">
  <div id="box-left">
   Box 1!
  </div>
  <div id="box-right">
   Box 2!
  </div>
 </div>
</body>

Split the web page diagonally

1 Answers1