具有 2 种颜色的正方形

在编写网页时，我们经常需要对元素进行样式设置，并且有时候需要对同一个元素设置多个样式。本文将介绍如何使用 CSS 创建一个具有 2 种颜色的正方形。

创建 HTML 元素

首先，我们需要创建一个 HTML 元素，用于展示这个具有 2 种颜色的正方形。我们可以使用 div 元素，并给它一个 class 属性，以便在 CSS 中进行样式设置。

<div class="square"></div>

设置基础样式

接下来，我们需要设置这个元素的基础样式，即宽度、高度和背景颜色。我们将元素的宽度和高度都设置为 100 像素，并将背景颜色设置为红色。

.square {
  width: 100px;
  height: 100px;
  background-color: red;
}

现在，我们已经创建了一个红色的正方形。

添加第二种颜色

为了创建具有 2 种颜色的正方形，我们需要添加一个第二种颜色。我们可以使用 CSS 的 ::after 伪元素来实现这一点。我们可以设置 ::after 元素的宽度和高度与原始元素相同，并将其放置在原始元素的上方，覆盖原始元素的一部分。

.square::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background-color: blue;
}

现在，我们已经添加了一个蓝色的正方形，它覆盖了原始元素的左半部分。

总结

以上就是如何使用 CSS 创建一个具有 2 种颜色的正方形的介绍。我们先创建了一个红色的正方形，然后使用 ::after 伪元素添加了一个蓝色的正方形，从而实现了正方形的 2 种颜色。下面是完整的代码片段：

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.square::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100px;
  background-color: blue;
}