【图形】CSS绘制心形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制心形</title> <style> #heart { position: relative; width: 200px; height: 180px; margin : 30px 0 0 30px; } #heart:before, #heart:after { position: absolute; content: ""; left: 100px; top: 0; width: 100px; height: 160px; background: red; -moz-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } </style> </head> <body> <div id="heart"></div> </body> </html>