不规则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。显示上下同理