CSS形状背后的力学

Question

http://jsfiddle.net/zth05v3q/

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;
}

我已经多次创造了这个形状，但是我只是通过调整左右边框宽度来完全了解形状，需要一个解释所以我明白了我的意思做。

Answer 1

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

所以，让我们从基础开始吧。边框究竟是如何呈现的？

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

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

如您所见，边框均匀绘制，并以它们连接的角度绘制。

示例中的border: 40px solid green;。这意味着整个边框宽40像素，绿色。要强调的是，这里有一个夸张边框的形状。宽度和高度为0，因此这是所有边框：

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

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

之后，（B）的顶部，右侧和底部边框颜色相同。

然后，最后，我们（C）（我还调整了它以匹配你的图片），把它扔到另一个div里面。 （基本上，：after标记意味着将这个东西放在当前容器中，但在它的末尾）。

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

Example fiddle showing each step.

Answer 2

您的代码会创建一个伪块元素，宽度和高度为0.对于0像素乘0像素的块，您可以添加边框。

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

通过操纵每个尺寸的宽度，您可以更改边缘周围产生的4个三角形的高度。此外，通过将侧面颜色设置为透明或其他颜色，您可以在形状上进行三角形切割。

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

<强> Example

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