bemyhero bemyhero - 1 year ago 114
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");}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download