用html画出爱心

最新推荐文章于 2024-06-13 11:55:52 发布

xiexinxia

最新推荐文章于 2024-06-13 11:55:52 发布

阅读量1.4w

点赞数 11

文章标签： html web 定位

本文链接：https://blog.csdn.net/xieixnxia/article/details/116102853

版权

这篇博客介绍了如何利用HTML和CSS创建一个爱心形状。通过在一个相对定位的容器中嵌套两个绝对定位的矩形，并分别对其进行45度的旋转，实现了爱心的视觉效果。主要涉及的技术包括CSS的伪元素、边框圆角、旋转和绝对定位。

摘要由CSDN通过智能技术生成

用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>

xiexinxia

关注

11
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
用html画出爱心

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

扫一扫