CSS画心形的三种方法
166 浏览量
2020-12-14
01:18:22
上传
评论
收藏 127KB PDF 举报
CSS画心形的三种方法画心形的三种方法
下面，介绍三种CSS画心形的方法。实现过程都非常简单，保证你一看就会。
1.一颗一颗div一颗心一颗心
用一个div画出一个心，核心的方法就是使用伪元素。
首先，我们在页面上先写出一个div：
<div></div>
使用CSS，将这个div变为一个橘红色的正方形：
div {
position:relative;
top: 100px;
left: 50%;
width: 100px;
height: 100px;
background-color: tomato;
}
接着我们利用元素的两个伪元素:before和:after，画出一个蓝色的圆和一个黄色的圆，并且将它们的圆心分别定位在正方形的
上边和右边。
div:before {
content: "";
position:absolute;
top: -50px;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
div:after{
content: "";
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
再来，将刚刚实现的两个圆变成和正方形一样的颜色：
weixin_38526823
- 粉丝: 5
- 资源: 946
评论0