如何制作图像三角形并围绕它进行描边？

Question

我希望图像呈三角形，带有10px黑色边框。我可以制作形状，但没有给它周围的笔触。我该怎么做呢 ？

Answer 1

以下是仅限webkit的解决方案：

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

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

这是一个非webkit解决方案：

<div class="new">
    <div class="empty"></div>
</div>

.new {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.new .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

CodePen for ease

Answer 2

如果您使用canvas

// stroke color
      context.strokeStyle = 'blue';
      context.strokeText('Hello World!', x, y);