CSS形状背后的机制[重复]答案

【问题标题】：Mechanics behind the CSS shape [duplicate]CSS形状背后的机制[重复]
【发布时间】：2014-10-03 13:53:54
【问题描述】：

div {
    background:red;
    width:100px;
    height:100px;

}
div:after{
      content: '';
      position: absolute;
      display: block;
      border: 40px solid green;
      border-left-width: 15px;
      border-right-width:15px;
      border-left-color: transparent;
}

我已多次创建此形状，但仅通过调整左右边框宽度我不太了解该形状是如何形成的，需要解释一下，以便我了解我在做什么。

【问题讨论】：

更多疑问：css-tricks.com/the-shapes-of-css。优秀的哲学家 Nimbuz，因为“......要成为优秀的哲学家，我们唯一需要的就是神奇的能力......” ― Jostein Gaarder，Sophie's World
这是因为top-border和bottom-border保持40px。由于div 的宽度为零，因此left-border 从中间开始。然后它必须像这样布置：jsfiddle.net/TRNCFRMCN/zth05v3q/1。或者类似的东西......

标签： css shape css-shapes

【解决方案1】：

其实，如果你仔细想想，这很容易解释。

那么，让我们从基础开始吧。边框究竟是如何渲染的？

首先我们来看一个普通的边框（边框：10px纯黑；背景：绿色）：

看起来和您期望的一样。现在，让我们看看它周围有不同的颜色：

如您所见，边框是均匀绘制的，并且在它们连接处以一定角度绘制。

你的例子中有border: 40px solid green;。这意味着整个边框是 40px 宽和绿色。需要强调的是，这是一个带有夸张边框的形状。宽度和高度都是0，所以这是所有边框：

此时，如果我们让左边框透明，它将只是绿色（在我的示例中）或红色（在您的示例中）。

所以，让我们这样做，然后 (A) 将它拉长一点（使顶部和底部的边框比左右边框大一点）。

之后，(B) 的顶部、右侧和底部边框颜色相同。

然后，最后，我们将 (C)（我还调整了它的大小以匹配您的图片），将其放入另一个 div 中。（基本上，:after 标签的意思是把这个东西放在当前容器里面，但是放在它的末尾）。

所以，你有它。简而言之，边框。

Example fiddle showing each step.

【讨论】：

哇，非常感谢您的详细解释和插图！

【解决方案2】：

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

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

通过控制每个尺寸的宽度，您可以更改围绕边缘生成的 4 个三角形的高度。此外，通过将一侧的颜色设置为透明或其他颜色，您可以在形状中切出一个三角形。

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

Example

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

【讨论】：