SVG - Partially stroking a triangle - svg

Question

I have a simple triangle SVG and I'm stuck trying to figure out how I can partially apply borders like I would in CSS? How would I go about just applying a stroke to just the left and the right side of the triangle but not the top?
https://jsfiddle.net/rf8a9xzy/1/
<span class="svg-triangle">
<svg width="100%" viewBox="0 0 20 10">
<polygon points="0,10 20,10 10,0" />
</svg>
</span>

Answer 1

You can use stroke-dasharray to set the parts of the stroke that you want to draw.
Dasharrays are made up of one or more pairs of numbers describing the length to draw, followed by the length to skip. It always starts with the drawn length. So a dasharray of "10 5" means draw a stroke section of length 10, followed by a gap of length 5. It then repeats. Draw another 10 and a gap of 5 etc.
Your triangle starts with a horizontal line of length 20, followed by two 45deg lines (of 10,10). The length of those other two sides are 14.142 - derived using Pythagoras' Theorem: sqrt(10^2 + 10^2).
So the dash array to draw the two sides would need to be:
0 20 28.284
Thats:
draw a stroke of 0,
a gap of 20 (the horizontal part of the triangle)
draw the two other sides (14.142 * 2)
.svg-triangle {
display: block;
width: 100px;
transform: rotate(180deg);
}
.svg-triangle svg {
fill: #FFF;
stroke: #000;
stroke-width: 1px;
stroke-opacity: 0.2;
}
.svg-triangle svg polygon{
stroke-dasharray: 0 20 28.284;
}
<span class="svg-triangle">
<svg width="100%" viewBox="0 0 20 10">
<polygon points="0,10 20,10 10,0" />
</svg>
</span>