Helping you build a better website
(and other interesting web stuff)

Silva Web Designs - Blog

How to make Responsive Slanted Divs in CSS

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

If you need to create a slanted div for your website then you have come to the right place.

We are going to create a slanted Div using CSS only. We are going to use the clip-path property and will be skewing the whole element. Here is the code:-


<div class="slanted"><a href="">SILVA WEB DESIGNS</a></div>


.slanted {
    background-color: #3b3c43;
    height: 500px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%); 

It really is that simple.

If you prefer to see a JSFiddle then click here.

I hope this helps.


Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

3 thoughts on “How to make Responsive Slanted Divs in CSS

  1. Oh my goodness! Incredigle article dude! Maany thanks,
    However I am havinng problems with your RSS.

    I don’t know why I can’t join it. Is there anybocy else getting similar RSS problems?
    Anyone that knows the solution will you kindly respond?

Join the discussion