bemyhero bemyhero - 1 year ago 103
CSS Question

How to get slanted borders in CSS

So I've seen this website.

This website has this cool effect on every


How to make this effect in css? I've tried a few things, but nothing works. Please please help! It's looks great.

Answer Source

There is so much you can learn from just inspecting using the developers tools from Firefox or Chrome...

and this is just what I took from that website:

the important code is this


<div class="wrapper"></div>


.wrapper::before, .wrapper::after {
background-repeat: no-repeat;
background-size: 100% 100%;
content: "";
display: block;
height: 6.5em;
position: absolute;
width: 100%;}

.wrapper::before, .wrapper::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141;' /%3E%3C/svg%3E");}