用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!
css实现心形图案
原文地址:https://www.cnblogs.com/renbo/p/9384636.html