2018-04-14 借助边框特性实现边框三角形
2018-04-14 本文已影响3人
正阳Android
如图所示的三角形
1.首先肯定是可以切图实现;
2.使用边框实现;具体步骤如下,
1.我们将width和height都设置为0
2.border颜色设置为#fff width设置为20px(当然也可以设置其他大小)
3.border-top-color设置为#ccc,就可以实现上面图片显示的三角形(当然也可以不设置top设置border-left-color,可以 看小效果)
代码如下
div {
width: 0;
height: 0;
border: 20px solid #fff;
border-top-color:#ccc;
/*border-left-color: #ccc;*/
/*border-bottom-color: #0062CC;*/
}
设置left 设置bottom自己可以实现一下看下效果哦