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

时间:2014-07-23 16:21:47

标签: css html5 css3 css-shapes

我想知道如何在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;
}

但不适合我。

1 个答案:

答案 0 :(得分: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-