纯CSS绘制心形图案
程序员文章站
2022-07-12 22:42:57
...
1,首先准备两个div
<div id='love'>
<div class="left"></div>
<div class="right"></div>
</div>
这个心形,是由里面两个div拼接而成,最外层div做容器,剩下由CSS完成
2,加背景,圆弧度,绝对定位
#love{
width:250px;
height:250px;
background:#ccff00;
position:relative;
margin:100px auto;
}
.left,.right{
width:100px;
height:150px;
background:red;
position:absolute ;
border-radius:50px 50px 0px 0px;
}
.right{
left:110px;
}
然后,图形如下: emmm,没错,就是这个猥琐的图形,
3,加入transform (3d转换效果) 资料详情
.left{
left:30px;
transform:rotate(-45deg);
}
.right{
left:67px;
transform:rotate(45deg);
}
负数逆时针转,正数顺时针转,(转完之后左边超出容器位置了,然后往右挪挪),右边这个left值,下面是盖住一部分左边的,两个夹角,形成心形
当当当当,一个心就出来了,
上一篇: (十二)Path 及贝塞尔曲线
下一篇: 【android UI学习】贝塞尔曲线