如何在CSS中获得倾斜的边框

Question

所以我见过this website。

此网站每个section端都有this cool effect。

如何在css中产生这种效果？我尝试了一些东西，但没有任何作用。请帮忙！它看起来很棒。

Answer 1

只需使用Firefox或Chrome中的开发人员工具进行检查，您就可以学到很多东西......

这就是我从该网站上获取的内容：

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

重要的代码就是这个

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");}