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

Question

所以我看到了this website .

本网站有this cool effect在每个 section 端。

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