如何用 css 画一个心形 (How to draw hearts using CSS)
用两个长方形切圆角倾斜位移并合并为一个心形
第一步 画一个长方形 (Draw a rectangle)
这个长方形就是爱心的一半
<div class="setp1"></div>
.setp1 {
width: 50px;
height: 100px;
background: red;
}
第二步 切圆角 (Cut the rounded)
切个圆角使得它更加像爱心
<div class="setp2"></div>
.setp2 {
width: 50px;
height: 100px;
background: red;
border-radius: 50% 50% 0 0
}
第三步 倾斜 (Tilt)
倾斜一下完成爱心的一半
<div class="setp3">
<div class="setp2"></div>
</div>
.setp2 {
width: 50px;
height: 100px;
background: red;
border-radius: 50% 50% 0 0
}
.setp3 {
position: relative;
left: 30px;
}
.setp3 > div {
transform: translate(-18px,0) rotate(-45deg);
}
第四步 合并 (Merge)
另一半如法炮制合并成一个爱心
<div class="setp4">
<div class="setp2 left"></div>
<div class="setp2 right"></div>
</div>
.setp4{
position: relative;
left: 30px;
height: 120px;
}
.setp4 > div {
position: absolute;
left: 0;
}
.left{
transform: translate(-18px,0) rotate(-45deg);
}
.right{
transform: translate(18px,0) rotate(45deg);
}
第五步 优化 (Optimize)
我们发现一个爱心用了 3 个 div 冗余结构太多了让我们优化一下。
用伪类代替冗余结构。
<div class="heart">
</div>
.heart{
position: relative;
left: 30px;
}
.heart:after {
border-left: 25px solid red;
border-right: 25px solid red;
border-top: 50px solid red;
border-bottom: 50px solid red;
border-radius: 50% 50% 0 0;
content: "";
position: absolute;
top: 0;
left: 0;
transform: translate(-18px,0) rotate(-45deg);
}
.heart:before {
border-left: 25px solid red;
border-right: 25px solid red;
border-top: 50px solid red;
border-bottom: 50px solid red;
border-radius: 50% 50% 0 0;
content: "";
position: absolute;
top: 0;
left: 0;
transform: translate(18px,0) rotate(45deg);
}
(完)
