我想知道如何在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;
}
但不适合我。
答案 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-