常遇到心形图案, 比如点赞和取消点赞的使用场景. 之前的使用方式是图片接入, 作为 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%;
- }
上图上图...
来源: https://juejin.im/post/5c5a3a54e51d457f9e521fc6