欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯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,没错,就是这个猥琐的图形,

纯CSS绘制心形图案

3,加入transform (3d转换效果)    资料详情

		.left{
			left:30px;
			transform:rotate(-45deg);
		}
		.right{
			left:67px;
			transform:rotate(45deg);
		}

负数逆时针转,正数顺时针转,(转完之后左边超出容器位置了,然后往右挪挪),右边这个left值,下面是盖住一部分左边的,两个夹角,形成心形

纯CSS绘制心形图案

当当当当,一个心就出来了,