怎么用css画一个心形_如何用CSS创建心形

最新推荐文章于 2023-11-12 00:15:00 发布

cune1359

最新推荐文章于 2023-11-12 00:15:00 发布

阅读量1.4k

点赞数 2

文章标签： css html js css3 python ViewUI

本文介绍了如何利用CSS3的border-radius和transform属性，结合HTML元素，创建一个心形图案。通过组合矩形和圆形的基本形状，以及适当的旋转和定位，可以实现一个简单但效果明显的心形设计。这种方法适合初学者理解CSS的形状和位置概念，同时也展示了CSS3的灵活性。

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

CSS3增强了我们仅使用HTML和CSS就能在网站上构建内容的可行性。您可以找到我们以前精选的出色示例。但是，不要让自己过分领先，复杂的设计将需要可能使您头疼的代码。

取而代之的是，我们将创建一些简单的内容，以帮助您先了解CSS的形状和位置 ，然后再尝试进行更高级的设计。由于情人节即将来临，让我们使用HTML和CSS创建一个心形。

基础

基本上，我们可以通过连接一个或多个基本形状（例如矩形和圆形）来创建新形状。如果我们检查一个心形，我们会发现它是由两个圆和一个矩形组合而成的 。 HTML元素本质上是正方形或矩形。多亏了CSS3的边框半径，我们可以轻松地将矩形转换成圆形。

首先添加<div>元素作为我们心形的基础。

<div class="heart-shape"></div>

然后，通过相等地指定宽度和高度，将其设为正方形。选择您喜欢的背景颜色。

.heart-shape{
	position: relative;
	width: 200px;
	height: 200px;
	background-color: rgba(250,184,66, 0.8);
}

接下来，我们将进行圈子。

除了添加新元素，我们将使用伪元素:before和:after 。我们首先将:before伪元素设置为我们的第一个圆圈。就像使用div一样，将其设置为宽度和高度相等的正方形。然后，通过给它50％的边界半径将其转换为一个圆形，并将其放在正方形的左侧。

.heart-shape:before{
	position: absolute;
	bottom: 0px;
	left: -100px;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 0.8);
}

与广场一起，我们将得到如下结果：

之后，我们用伪元素:after创建第二个圆，其样式与我们创建的第一个圆相同。然后，我们还将其放置在正方形的顶部。

.heart-shape:after{
	position: absolute;
	top: -100px;
	right: 0px;
	width: 200px;
	height: 200px;
	content: '';
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;

	background-color: rgba(250,184,66, 0.8);
}

结果如下：

我们可以通过将伪元素选择器分组如下来组合这两种相同的样式：

.heart-shape:before,
.heart-shape:after{
	position: absolute;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 0.8);
}
.heart-shape:before{
	bottom: 0px;
	left: -100px;
}
.heart-shape:after{
	top: -100px;
	right: 0px;
}

- 我们有一个心脏形状，尽管它的方向不正确。为了弄清楚它，我们将使用CSS3 Transformation。

可以对形状的主要元素进行转换；在这里，这就是正方形。转换后，伪元素将自动更改其在主要元素之后的位置。

在这里，我们将旋转心脏，使其被视为“站立”。

.heart-shape{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

这就是我们现在的心。

结果：

上面的心脏形状的完整代码如下，使用HTML：

<div class="heart-shape"></div>

在我们CSS上，它将是这样的：

.heart-shape{
	position: relative;
	width: 200px;
	height: 200px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: rgba(250,184,66, 1);
}
.heart-shape:before,
.heart-shape:after{
	position: absolute;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: rgba(250,184,66, 1);
}
.heart-shape:before{
	bottom: 0px;
	left: -100px;
}
.heart-shape:after{
	top: -100px;
	right: 0px;
}

请注意，我们现在将背景中的rgba(250,184,66, 1)的Alpha通道设置为1以删除透明度。现在，这就是我们内心的样子。