DEV Community


Posted on

Creating Slanted Division in HTML and CSS

There are many post on how to create a slanted div using HTML and CSS.
They use pseudo elements which is not required at all. In just five lines of CSS code anyone can create a slanted div.

HTML codes

 <div class="main"></div>
 <div class="skew"></div>

CSS codes

 .main{height: 70px;background: #000;}
 .skew{height: 40px;background: #000;transform: skewY(2deg);margin-top: -20px;}

Just try this code and you will be easily able to create slanted division using HTML and CSS.

Top comments (0)