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以删除透明度。 现在，这就是我们内心的样子。

现在我们有了完美的心形，我们可以轻松地将背景替换为另一种颜色 （例如，粉红色或红色）。 唯一的缺点是由于元素堆叠，我们无法在形状上添加边框 。 添加边界线会使心脏看起来很奇怪。

结论

使用CSS3可以轻松地创建类似Heart形状的形状。 border-radius属性使我们可以将元素甚至伪元素变成一个圆形 。 通过CSS3转换 ，我们可以轻松旋转或移动对象的坐标 。

您仅受您的创造力和想象力的限制！

翻译自: https://www.hongkiat.com/blog/css-heart-shape/