DEV Community

anirudhsingh09
anirudhsingh09

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)

Image of PulumiUP 2025

Let's talk about the current state of cloud and IaC, platform engineering, and security.

Dive into the stories and experiences of innovators and experts, from Startup Founders to Industry Leaders at PulumiUP 2025.

Register Now

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay