底部和顶部有角度的盒子

Question

我想知道如何在 CSS3 有角度的盒子中制作。喜欢这个网站： http://themeluxe.com/themes/glissando/（白人）

以及如何让边框看起来更好、更平滑。

查看他们的代码，我发现了这个 css：

.container:before, .container:after {
    border-bottom: 80px solid transparent;
    border-left: 110vw solid transparent;
    content: "";
    display: none;
    height: 0;
    margin-top: -80px;
    position: relative;
    width: 0;
}

但对我不起作用。

Answer 1

在您链接到的网站中，他们使用“边框技术”在伪元素上创建斜框，您可以在 SO question 中了解这种技术。

这是一个使用这种技术创建倾斜底部和顶部的简单小提琴。它应该可以帮助您了解它的工作原理：

DEMO

HTML：

<div></div>
<div class="second"></div>

CSS：

body{
    margin:0;
    padding:0;
}
div{
    height:200px;
    background:teal;
    position:relative;
}
.second{
    background:gold;
}

.second:before{
    content:'';
    position:absolute;
    bottom:100%;
    border-left:100vw solid transparent;
    border-bottom: 80px solid gold;
}

您还应该知道，在您链接到的网站中，他们使用的是vw units。他们是not supported by IE8-