用1个标签实现心形图案，show you the code;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{ margin-top: 50px; text-align: center; } :root { --heart-color:pink; } .heart{ display: inline-block; position: relative; width: 60px; height: 60px; background-color: var(--heart-color,red); transform: rotate(-45deg) } .heart::before, .heart::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--heart-color,red);; } .heart::before{ top: -50%; left: 0; } </style> </head> <body> <div class="container"> <i class="heart"></i> </div> </body> </html>
有木有觉得css很好玩，let's do something interesting!