淘先锋技术网

首页 1 2 3 4 5 6 7

在CSS中,绘制一个心形是一项比较有趣的挑战。下面将介绍如何使用CSS代码绘制一个漂亮的心形。

.heart {
width: 100px;
height: 100px;
position: relative;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 0;
left: 50px;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

首先创建一个具有相对位置的div,然后将伪元素:before和:after设置为绝对位置。伪元素:before和:after代表心形的两个半边。其中:before用blue作为背景颜色,并将其旋转45度,并使用transform-origin属性将其定位正确。:after也是类似的过程,只不过将其旋转另一个方向。最后,将宽度和高度调整为适当的大小,就可以看到一个漂亮的心形了。