如何製作圖像三角形並在其周圍劃一箇中風？

Question

我想要一個圖像爲10px黑色邊框的三角形形狀。我可以塑造形狀，但沒有在它周圍打中風。我該怎麼做呢 ？

Answer 1

如果您正在使用canvas

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

Answer 2

這裏僅僅是一個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