如何使圖像三角形並在其周圍進行筆觸？

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輕松

Answer 2

如果您使用canvas

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