html5 纵向分割线,html5和css3制作不规则的网页背景分割线

这是一款实用的、效果炫酷的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: lef