html - 如何使用 CSS 创建带边框的透明三 Angular 形？

Question

如何使用 CSS 创建以下形状？

我试过这是一个解决方案:

 .triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

您可以在 Triangle 看到它在工作。这是可行的，但有一些边界技巧。还有其他方法吗？

使用 SVG 矢量可以很容易地做到这一点，但我不想走那么长的路。

Answer 1

我找到了一个 webkit -only 解决方案，使用 ▲ 字符:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

<div class="triangle">&#9650;</div>

额外内容:

• CanIUse reference对于 text-stroke - 截至 2019 年涵盖的所有主要浏览器
• CSS-tricks文章
• Useful HTML shapes