带尖角的div

最新推荐文章于 2020-12-24 11:49:42 发布

weixin_30776863

最新推荐文章于 2020-12-24 11:49:42 发布

阅读量178

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/MarkSun3/p/9128069.html

版权

原以为尖角三角形是png图片，原来是可以用css画出来，css3也可以很简单的得到带圆角的div，

大概思路：

1.画出一个带细边框的div

2.使用::before和left:100%在div的右边添加一个height和width为0但是带边框的元素

3.使用::after覆盖before

 #demo {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border: 2px rgb(31, 197, 86) solid;
            border-radius:10px;
            position: relative;
        }
      
        /*先画出一个三角形*/
        #demo::before{
            content: '';
            width: 0px;
            height: 0px;
            border:20px solid transparent;/*border设置成透明，但是右边border设置成红色*/
            border-left-color: rgb(55, 82, 235) ;
            top: 10px;
            left: 100%;
            position: absolute;
        }

        /*用透明三角形去覆盖这个三角形*/
        #demo::after{
            content: '';
            width: 0px;
            height: 0px;
            border:18px solid transparent;
            border-left-color: white ;
            top: 12px;
            left: 100%;
            position: absolute;
        }

　　这样就出现了一个类似消息发送的形状，css是不是很神奇呢

转载于:https://www.cnblogs.com/MarkSun3/p/9128069.html