纯css图形 对话框&心形

代码：

  /*三角形*/
        #triangle{
            width: 130px;
            height: 80px;
            position: relative;
            background-color: red;
            border-radius: 8px;
        }
       #triangle:after{
           content: "";
           width: 0;
           height: 0;
           position: absolute;
           top: 80px;
           left: 25px;
           border-left: 20px solid transparent;
           border-right: 22px solid transparent;
           border-top: 20px solid red;
       }
        /*心形1*/
        #heart {
            position: relative;
            width: 100px;
            height: 90px;
        }
        #heart:before,#heart:after{
            position: absolute;
            content: "";
            width: 100px;
            height: 60px;
            background-color: red;
        }
        #heart:before{
            transform: rotateZ(-45deg) translateY(20px);
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        #heart:after{
            transform: rotateZ(45deg) translateY(20px);
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }
        /*心形2*/
        #heart2{
            position: relative;
            width: 60px;
            height: 60px;
            background-color: red;
            transform: rotateZ(-45deg);
        }
        #heart2:before{
            content: "";
            position: absolute;
            width: 60px;
            height: 60px;
            top:-35px;
            border-radius: 50%;
            background-color: red;
        }
        #heart2:after{
            content: "";
            position: absolute;
            top:0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: red;
            transform: translateX(35px);
        }

<!--对话框 长方形与伪类三角拼接-->
<div id="triangle"></div><br>

<!--心形1 两个长方形伪类元素斜45度，左上和左下圆角-->
<div id="heart"></div><br>

<!--心形2  一个正方形，两个伪类的圆形拼接-->
<div id="heart2"></div><br>

结果：

image.png

想要更多的图形可参考：
https://blog.csdn.net/qq_40428678/article/details/81269391