首页 > Web开发 > 详细

css绘制三角形

时间:2019-09-04 14:29:20      阅读:108      评论:0      收藏:0      [点我收藏+]

  简单写一个空的div,设置款高为0,设置边框border

  实现这个效果

  技术分享图片

 

 

        div{
            width: 0;
            height: 0;
            /* 设置边框 */
            border: 100px solid;
            /* 边框颜色 */
            border-color: #f00 #000 #0f0 #00f
        }

  只要将其他边框设为透明色,单独设置一个边框的颜色,就实现了一个三角形

技术分享图片

 

 

        div {
            width: 0;
            height: 0;
            /* 设置边框 transparent为透明 */
            border: 100px solid transparent;
            /* 要设置的位置 */
            border-bottom: 100px solid #f00;
        }

 

css绘制三角形

原文:https://www.cnblogs.com/zhangcheng001/p/11458801.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!