html css制作爱心案例

最新推荐文章于 2025-03-16 15:09:47 发布

遇见颜言

最新推荐文章于 2025-03-16 15:09:47 发布

阅读量789

点赞数 1

分类专栏：静态网页

本文链接：https://blog.youkuaiyun.com/qq_59068879/article/details/119720123

版权

静态网页专栏收录该内容

2 篇文章

订阅专栏

这篇博客通过HTML和CSS展示了如何制作一个桃心形状。利用浮动、边框半径和旋转等CSS属性，将两个矩形盒子变形为相互交错的半圆形，形成桃心的外观。博客中详细解释了每个样式的作用，包括背景图片、尺寸调整和位置定位，为初学者提供了一种创意的CSS实践方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>桃心</title>
</head>
<body>
    <!-- 先制作一个盒子作为承载 -->
	<div class="all">
        <!-- 左边的盒子 -->
		<div class="left">

		</div>
        <!-- 右边的盒子 -->
		<div class="right">

		</div>
	</div>
</body>
</html>

css代码块：

 /* 先去除页边距 */
	*{
		margin: 0px;
		padding: 0px;
	}
    /* 设置总体页面的背景颜色 */
	body{
		background-color: black;
	}
    /* 设置承载盒子的大小颜色 */
	.all{
		width: 500px;
		height: 500px;
		background-color: white;
		margin: 0 auto;
        background-image: url(img/1.png);
		margin-top: 130px;
	}
    /* 左边盒子开始 */
	.left{
		float: left; /*设置盒子向左变流动-便于两个盒子在同一行  */
		width: 120px;  
        height: 200px;
		background-color: red;
		border-top-left-radius: 100px;   /*设置盒子左上角变圆 */
		border-top-right-radius: 100px;   /*设置盒子右上角变圆*/
		border-bottom-left-radius: 25px;   /*设置盒子左下角变圆  */
		margin-top: 130px;
		margin-left: 150px;
		transform: rotate(-45deg);  /* 盒子旋转 */
	}
	.right{
		float: left;  /*设置盒子向左变流动-便于两个盒子在同一行  */
		width: 120px;
		height: 200px;
		background-color:red;
		border-top-left-radius: 100px;  /*设置盒子左上角变圆 */
		border-top-right-radius: 100px;   /*设置盒子右上角变圆*/
		border-bottom-right-radius: 25px;  /*设置盒子左下角变圆  */
		margin-top: 130px;
		margin-left: -60px;
		transform: rotate(45deg);  /* 盒子旋转 */
        visibility:visible;

	}