CSS制作红桃心

这里主要用到了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>
View Code