不规则div的写法

编写过程中的效果：

HTML代码：

<div class="se-slope se-slope-grey">输入手机号</div>
<div class="se-slope se-slope-blue">设置密码</div>

CSS代码：

.se-container{width: 100%;}
.se-slope{width: 50%;height: 40px;position: relative;float: left;overflow: hidden;}
.se-slope-blue{background:#45AAFF;}
.se-slope-grey{background:#9A9A9A;}
.se-slope-blue:nth-child(even):after{content: '';position: absolute;display: block;bottom: 0px;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}
.se-slope-blue:nth-child(even):after{border-left: 30px solid #9A9A9A;}

(1)实现的关键是使用CSS3中的伪类选择器nth-child(even)匹配为偶数的的元素。然后在其后插入内容。插入的内容为

{border-top: 20px solid transparent;border-bottom: 20px solid transparent;}此样式。将上下border设为透明。

简单概括为：当你需要三角形小区块向左（右），就设置上下border隐藏，并显示其右（左）boder。显示上下同理

参考地址 http://www.w3coo.com/css3/1494.html?replytocom=2377

http://hi.baidu.com/clups/item/4934b1f31b5d701ccf9f3251