WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to make Responsive Slanted Divs in CSS – 2020 Version

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:-

HTML


<div class="slanted"><a href="https://silvawebdesigns.com">SILVA WEB DESIGNS</a></div>

CSS


.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.

We sure hope this helps. If you would like any assistance with this, drop us an email or leave a comment below and we will get back to you.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

One thought on “How to make Responsive Slanted Divs in CSS – 2020 Version

  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?
    Thanx!!

Join the discussion

Related Posts

Related - How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

CSS / 18th March 2025

How to calculate CSS letter-spacing vs. “tracking” in typography? Photoshop/Illustrator to CSS

Read More Related - How To Create A Modern Scroll Down Animation Icon With CSS

CSS / 14th March 2025

How To Create A Modern Scroll Down Animation Icon With CSS

Read More