CODEWITHSUNDEEP
htmlcssgeometryshapesstroke
user3161611
user3161611

Reputation: 1

How to make an image triangle and give a stroke around it?

I want an image to be in a triangle shape with 10px black border. I can make the shape but failing to give stroke around it. How do I do this ?

Upvotes: 0

Views: 226

Answers (2)

Albzi
Albzi

Reputation: 15609

Here is a webkit only solution:

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

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

Here is a non-webkit solution:

<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

Upvotes: 1

Anup
Anup

Reputation: 9738

If you are using canvas

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

Upvotes: 0

Related Questions