这是一款实用的、效果炫酷的html5和css3制作不规则的网页背景分割线网页模板。
EXAMPLE 1
下面来看一下第一个demo的制作流程。
html结构:实用一个section来包裹所有的内容,其中放置一个class为se-slope的div,div中放置的是文章article。
Some headline
Some text
CSS
背景的颜色和偶数se-slope单元的背景色一致。
body{
background: #e90089;
}
包裹容器设置为overflow:hidden,因为当我们旋转某些元素的时候,它们可能会发生溢出。:
.se-container{
display: block;
width: 100%;
overflow: hidden;
padding-top: 150px;
}
所有的div都将被旋转:单数的div将填充黑色和旋转5度,偶数的div将填充紫色并旋转-5度。在旋转时我们需要调整单数div的位置,这里是在顶部添加了一个margin。
.se-slope{
margin: 0 -50px;
transform-origin: le