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-

带有倾斜底部和顶部的盒子

1 个答案: