CODEWITHSUNDEEP
svgpolygon
Nelfo
Nelfo

Reputation: 3845

Cleanest way to put a border on one side of SVG polygon?

<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100"></polygon>
</svg>

Is it possible to put a border on only the right-side of this shape without using JavaScript?

Upvotes: 0

Views: 236

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31805

Use an appropriate stroke-dasharray

<svg width="600px" height="600px" fill="blue" viewBox="0 0 101 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100" stroke="red" pathLength="100" stroke-dasharray="0 15.4 34.6 100"></polygon>
</svg>

Upvotes: 2

Nikolay
Nikolay

Reputation: 12255

Maybe a shadow would do?

<svg fill="blue" viewBox="0 0 100 100" preserveAspectRatio="none">
     <polygon points="50,0 100,0 50,100 0,100" style="filter: drop-shadow(1px 0px 0px black)"></polygon>
</svg>

Upvotes: 0

Related Questions