今天,我们利用CSS实现心形。具体代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS基本形状——心形</title> <style type="text/css"> * { margin:40px; padding:0px; } .heart { width: 100px; height: 90px; position: relative; } .heart::before { content: ""; width: 50px; height: 80px; border-radius: 50px 50px 0 0; background: #FF7F50; transform-origin: 0 100%; transform: rotate(-45deg); position: absolute; left: 50px; } .heart::after { content: ""; width: 50px; height: 80px; border-radius: 50px 50px 0 0; background: #FF7F50; transform-origin: 100% 100%; transform: rotate(45deg); position: absolute; }</style></head><body> <div class="heart"></div></body></html>
实现效果如下: