html - CSS 网格中的纯 CSS 箭头 Div

Question

有没有办法在 CSS 中创建类似的东西，但更灵活(例如，在 CSS 网格单元格中使用)？ – 原帖 here .

#triangles {
  margin: 3em;
  width: 0; /* set dimensions of DIV to 0 so borders collapse and touch */
  height: 0;
  border-color: red blue green yellow; /* top, right, bottom, and left border */
  border-style: solid;
  border-width: 50px; /* width of each border */
}

<div id="triangles"></div>

Answer 1

您可以使用linear-gradient 轻松创建这些三 Angular 形。您可以考虑单独的类(如下所示)或在一个元素中将它们用作多个背景。

#triangles {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#triangles div {
  height: 100%;
}

.tr-left {
  background: 
    linear-gradient(to top left, transparent 50%, red 0) 0 100%/50% 50% no-repeat, 
    linear-gradient(to bottom left, transparent 50%, red 0) 0 0/50% 50% no-repeat;
}

.tr-right {
  background:
    linear-gradient(to top right, transparent 50%, yellow 0) 100% 100%/50% 50% no-repeat,
    linear-gradient(to bottom right, transparent 50%, yellow 0) 100% 0/50% 50% no-repeat;
}

.tr-top {
  background:
    linear-gradient(to top right, transparent 50%, green 0) 0 0/50% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, green 0) 100% 0/50% 50% no-repeat;
}

.tr-bottom {
  background:
    linear-gradient(to bottom right, transparent 50%, blue 0) 0 100%/50% 50% no-repeat,
    linear-gradient(to bottom left, transparent 50%, blue 0) 100% 100%/50% 50% no-repeat;
}

<div id="triangles" class="tr-left"></div>
<div id="triangles" class="tr-left">
  <div class="tr-right"></div>
</div>
<div id="triangles" class="tr-top">
  <div class="tr-right"></div>
</div>

<div id="triangles" class="tr-left">
  <div class="tr-bottom">
    <div class="tr-top">
      <div class="tr-right"></div>
    </div>
  </div>
</div>