带尖角的div

Posted 2020-11-10 秋风之后

原以为尖角三角形是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是不是很神奇呢