不规则div的写法

编写过程中的效果：

HTML代码：

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

.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;}  

 

　　实现的关键是使用CSS3中的伪类选择器nth-child(even)匹配为偶数的的元素。然后在其后插入内容。插入的内容为{border-top: 20px solid transparent;border-bottom: 20px solid transparent;}此样式。将上下border设为透明。

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