这里主要用到了before与after属性之前之后
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>画画</title> <style> #xing{ width: 100px; height: 80px; position: relative; } #xing:before{ content: ""; width: 50px; height: 80px; display: block; position: absolute; left: 50%; background: #FF0000; border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } #xing:after{ content: ""; width: 50px; height: 80px; display: block; background: red; transform: rotate(45deg); border-radius: 25px 25px 0 0; transform-origin: 100% 100%; } </style> </head> <body> <!-- 描述：1.1、、心形 --> <div id="xing"> </div> </body> </html>