用html画出爱心

用html写出的爱心软件：Sublime Text3思想：在一个盒子中嵌套两个矩形，将矩形上部做成圆角，各向左向右旋转45度。代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>白鹿为霜</title><style type="text/css">b

xiexinxia

14189人浏览 · 2021-04-24 20:01:15

xiexinxia · 2021-04-24 20:01:15 发布

用html写出的爱心

软件：Sublime Text3

思想：在一个盒子中嵌套两个矩形，将矩形上部做成圆角，各向左向右旋转45度。

代码：


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>白鹿为霜</title>
	<style type="text/css">
		body{
			margin: 0;/*外边距  上下 左右*/
		}
		.heart{
			position: relative;
			width: 250px;
			height: 250px;
			background-color: ; 
			margin: 60px auto;
		}
		.heart:before{
			content: "";/*激活伪元素必要因素*/
			position: absolute;/*绝对定位属性  不受父级约束 */
			top: 0;
			left: 0;
			width: 100px;
			height: 160px;
			background-color: red;
			border-radius: 50px 50px 0px 0px;
			
			transform: rotate(-45deg);/*旋转 -左 +右*/
		}
		/*before和after在元素内容前后加入指定内容（伪类）*/
		.heart:after{
			content: "";/*激活伪元素必要因素*/
			position: absolute;/*绝对定位属性  不受父级约束 */
			top: 0;
			left: 0;
			width: 100px;
			height: 160px;
			background-color: red;
			border-radius: 50px 50px 0px 0px;
			transform: translate(43px) rotate(45deg);
		}
	</style>
</head>
<body>
	<div class="heart"></div>

</body>
</html>