css用线条形成心形 |css3 w3c

.heart {
width: 20px;
height: 20px;
position: relative;
margin: 20px auto;
transform: rotate(-45deg);
box-shadow: inset 0 0 0 2px #f00;
}
.heart::before,
.heart::after{
content: "";
background-color: #f00;
position: absolute;
transform: rotate(45deg);
}
.heart::before {
width: 20px;
height: 20px;
top: -10px;
left: 0;
border-radius: 10px 0 0 10px;
}
.heart::after {
width: 20px;
height: 20px;
top: 0;
left: -10px;
border-radius: 0 10px 10px 0;
}

首先，大家创建一个class为heart的元素，并设置宽高、相对位置和阴影。然后，大家用伪元素:before和:after来分别表示心形的左半部分和右半部分。通过设置不同的位置、边框半径和背景颜色，大家可以让这两个伪元素组合成一个完整的心形。

以上就是用CSS实现用线条形成的心形的方法。尝试一下吧！