Как сделать треугольник изображения и обвести вокруг него обводку?

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