常遇到心形图案,比如点赞和取消点赞的使用场景。之前的使用方式是图片接入,作为img
或 backgroundImage
插入到 dom 中去。现在自己动手用css绘制一个心形图案。
心形
准备一个dom
元素如下,为其id
赋值为heart
<div id="heart"></div>
复制代码
添加宽高
#heart {
position: relative;
width:50px;
height:40px;
}
复制代码
现在它应该是一个宽50px
,高40px
的矩形,没跑了。现在开始操作伪元素
/*上一步骤的代码省略...*/
#heart:before,
#heart:after{
position: absolute;
left:0;
top:0;
content: '';
width: 25px;
height: 40px;
background: red;
border-radius: 20px 20px 0 0;
}
#heart:after {
content: '';
left: 25px;
top:0
}
复制代码
emmm... 形状无法描述,上图吧还是...到现在为止的形状应该是这个样子的。
接下来要做的是将before
和after
两块内容旋转。代码如下:
#heart:before,
#heart:after{
position: absolute;
left:25px;
top:0;
content: '';
width: 25px;
height: 40px;
background: red;
border-radius: 40px 40px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
content: '';
left: 0;
top:0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
复制代码
上图上图...
效果已出,感谢阅读。