美文网首页web前端学习
2018-04-14 借助边框特性实现边框三角形

2018-04-14 借助边框特性实现边框三角形

作者: 正阳Android | 来源:发表于2018-04-14 17:01 被阅读3次
    如图所示的三角形

    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

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

    相关文章

      网友评论

        本文标题:2018-04-14 借助边框特性实现边框三角形

        本文链接:https://www.haomeiwen.com/subject/vophkftx.html