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