web前端学习

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

自己可以实现一下看下效果哦

上一篇下一篇

猜你喜欢

热点阅读