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

<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?

CodePudding user response：

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>

CodePudding user response：

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>