CSS3画红心

Posted by 竹林品雨 on November 22, 2013

多多的红心: 红心 /red-heart.html

###红心

 


css #heart{ position: relative; width: 300px; height: 270px; } #heart:after, #heart:before{ position: absolute; content: ""; left: 150px; top: 0; width: 150px; height: 240px; background: red; border-radius: 75px 75px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; } #heart:after{ left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; } css