bemyhero bemyhero - 4 months ago 18
CSS Question

How to get slanted borders in CSS

So I've seen this website.

This website has this cool effect on every

section
end.

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

Answer

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:

http://codepen.io/anon/pen/BjoWYe

the important code is this

html

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

css

.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='http://www.w3.org/2000/svg' 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");}