html - 底部和顶部 Angular 盒子

Question

我想知道如何在 CSS3 中制作成 Angular 盒子。喜欢这个网站: 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 中了解该技术。 .

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

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-