Create slanted divs using CSS only

We can create slanted divs using CSS only. Here we are creating different types of slanted divs, slanting from different sides of the div.

Example

The key to constructing your own slanted div’s of differnt sizes is that you need to know which CSS attribute is creating the slant. Here is an example:
.slanted-right.slant-to-right:after {
  right: 0px;
  border-right: 100px solid #ececec;
  border-bottom: 200px solid  #333333;
}
Here,
  • right property tells which side to add the slant (or the border).
  • border-right property adds border from right of 100px and of lighter shade background, thats different from the main div background.
  • border-bottom property adds border from bottom of 200px and of background color same as main div background.
Now, the right and bottom border create triangular borders due to intersection of the styles. But by color them appropriately(as mentioned above) we can make them look like slant.

Demo

DIV’s Slanted to left and right

DIV’s Slanted from top and bottom

Code

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="slanted slanted-right slant-to-left"></div>
  <div class="slanted slanted-right slant-to-right"></div>
  <div class="slanted slanted-left slant-to-right"></div>
  <div class="slanted slanted-left slant-to-left"></div>
  
  <div class="slanted slanted-top slant-to-left"></div>
  <div class="slanted slanted-top slant-to-right"></div>
  <div class="slanted slanted-bottom slant-to-right"></div>
  <div class="slanted slanted-bottom slant-to-left"></div>
</body>

</html>

CSS

.slanted {
  position: relative;
  height: 200px;
  background: #333333;
  float: left;
  float: left;
  margin: 10px;
}
.slanted.slanted-left {
  width: 300px;
}
.slanted.slanted-right {
  margin-left: 110px;
  width: 200px;
}
.slanted.slanted-right.slant-to-right {
  margin-left: 10px;
  width: 300px;
}
.slanted.slanted-top {
  width: 300px;
}
.slanted.slanted-bottom {
  width: 300px;
}

.slanted:after,
.slanted:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.slanted-right.slant-to-left:after {
  left: -100px;
  border-right: 100px solid #333333;
  border-top: 200px solid  #ececec;
}
.slanted-right.slant-to-right:after {
  right: 0px;
  border-right: 100px solid #ececec;
  border-bottom: 200px solid  #333333;
}
.slanted-left.slant-to-right:after {
  left: 0;
  border-left: 100px solid #ececec;
  border-top: 200px solid #333;
}
.slanted-left.slant-to-left:after {
  right: 0;
  border-left: 100px solid #333333;
  border-bottom: 200px solid #ececec;
}

.slanted-top.slant-to-left:after {
  bottom: 0;
  border-bottom: 100px solid #333333;
  border-left: 300px solid #ececec;
}
.slanted-top.slant-to-right:after {
  bottom: 0;
  border-bottom: 100px solid #333333;
  border-right: 300px solid #ececec;
}
.slanted-bottom.slant-to-right:after {
  top: 100px;
  border-bottom: 100px solid #ececec;
  border-right: 300px solid #333333;
}
.slanted-bottom.slant-to-left:after {
  top: 100px;
  border-bottom: 100px solid #ececec;
  border-left: 300px solid #333333;
}
If you find any issues with using this. Do reach me out. Cheers.