CSS制作红桃心

转载自 www.cnblogs.com/LCH-M/p/933…

#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%;
            }