CSS形状背后的机制

我已经创建了很多次这个形状，但是我不太明白这个形状是如何通过调整左边框和右边框的宽度来实现的，我需要一个解释，这样我才能理解我在做什么

---

您的代码创建了一个宽度和高度为0的伪块元素。向该0像素乘0像素块添加边框

CSS边框的角与相邻的两个边成一定角度。边界的每条边通常呈梯形。在这种情况下，内边缘为0像素宽，因此在每个尺寸上生成一个三角形

通过操纵每个尺寸的宽度，可以更改围绕边生成的4个三角形的高度。此外，通过将边的颜色设置为透明或其他颜色，可以在形状中获得三角形切割

为了帮助可视化正在发生的事情，请查看将宽度和高度添加到伪元素，并且每个边框边都有不同的颜色时会发生什么

border-top-color: blue;
border-bottom-color: yellow;
width: 10px;
height: 10px;

---

事实上，如果你仔细想想，这很容易解释

那么，让我们从基础开始。边界是如何渲染的

首先，让我们看看普通边框（边框：10px纯黑；背景：绿色）：

看起来就像你期望的那样。现在，让我们用不同的颜色来看看它：

正如您所看到的，边界是均匀绘制的，并以它们连接的角度绘制

您示例中的一个具有

边框：40px纯绿色。这意味着整个边界是40像素宽的绿色边界。要强调的是，这是一个带有夸张边框的形状。宽度和高度为0，因此这是所有边界：


在这一点上，如果我们使左边框透明，它将只是绿色（在我的示例中）或红色（在您的示例中）

那么，让我们这样做，然后将其拉伸一点（使顶部和底部的边界比左侧和右侧的边界大一点）

然后，（B）使顶部、右侧和底部边框颜色相同

然后，最后，我们将（C）（我也调整了它的大小以匹配您的图片），将它放入另一个div中。（基本上，：after标记表示将此内容放入当前容器中，但放在它的末尾）


好了，就这样。概括地说就是边界

更多令人惊奇的事情：。好哲学家Nimbuz，因为“……我们成为好哲学家所需要的唯一东西是惊奇的能力……”Jostein Gaarder，Sophie的世界这是因为
上边框和
下边框保持在40px。由于
div
的宽度为零，因此
左边框从中间开始。然后它必须这样布置：。或者类似的东西…哇，感谢堆的详细解释和插图！
border-top-color: blue;
border-bottom-color: yellow;
width: 10px;
height: 10px;