如何仅使用 html 和 css 创建一个带有一侧边框的三角形

Question

如何仅使用 html 和 css 创建一个仅在三角形一侧有边框的三角形。我怎样才能实现这一目标。

我可以使用不同的方法创建一个三角形，如剪辑路径、线性渐变，但边框是非常棘手的

Answer 1

line {
  stroke-linecap: round;
}

.stroked {
  stroke: magenta;
  stroke-width: 1;
}

:not(.stroked) {
  stroke: teal;
  stroke-width: 0.25;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="20" y1="50" x2="50" y2="10"></line>
  <line x1="50" y1="10" x2="80" y2="50"></line>
  <line class="stroked" x1="80" y1="50" x2="20" y2="50"></line>
</svg>