html - 为什么设置为透明时边框颜色会呈现为背景色？

Question

我正在创建一些 CSS 插图，我想创建一个三角形。但是，您会看到透明边框实际上并不透明。它与 的背景色具有相同的颜色<div>。

.triangle {
  background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid transparent;    /* This is the culprit */
}

<div class="triangle"></div>

但是，当我使用不同的颜色时，如果边框是透明的，则表明创建的形状应该是三角形。

.triangle {
  background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid black;    /* Changed to black */
}

<div class="triangle"></div>

那么，如何解决呢？

Answer 1

背景颜色挡住了路。

.triangle {
  //background-color: #ff3e30;
  height: 0px;
  width: 0px;
  border-left: 50px solid transparent;
  border-bottom: 100px solid #ff3e30;
}

<div class="triangle"></div>

Answer 2

默认情况下背景覆盖边框区域。您可以使用background-clip（或像@Mahmood Kiaheyrati 所说的那样简单地将其删除）更改此行为

.triangle {
  background-color: #ff3e30;
  background-clip:padding-box;
  height: 0px;
  width: 0px;
  border-bottom: 100px solid #ff3e30;
  border-left: 50px solid transparent;
}

<div class="triangle"></div>

Answer 3

我希望你做得很好。

在此链接中，您会发现一些三角形。您可以练习以更好地理解它的工作原理。

https://css-tricks.com/the-shapes-of-css/

三角左下角的 CSS

#triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}

html

<div id="triangle-bottomleft"></div>