<svg width="340" height="240">
<polyline points="111 61.5 217.984 61.5 123.035 180.231 229.738 180.06" stroke="teal" stroke-width="80" stroke-linecap="square" fill="none"></polyline>
<polyline points="122 61.5 217.984 61.5 123.035 180.231 218.738 180.06" stroke="lightseagreen" stroke-width="50" stroke-linecap="round" stroke-linejoin="round" fill="none"></polyline>
<polyline points="120 61.5 217.984 61.5 123.035 180.231 220.738 180.06" stroke="gold" stroke-width="10" stroke-linejoin="bevel" fill="none"></polyline>
</svg>
У меня так получилось))
svg {
border: 1px solid #dddddd;
}
polyline:last-child {
fill:none;
stroke-width:10;
stroke:gold;
stroke-linejoin:bevel;
}
polyline:nth-child(2) {
fill:none;
stroke-width:50;
stroke:lightseagreen;
stroke-linecap:round;
stroke-linejoin:round;
}
polyline:first-child {
fill:none;
stroke-width:80;
stroke:teal;
stroke-linecap:square;
}
1 лайк
Мой вариант
Зигзаги
/* Используемые цвета:
teal, lightseagreen, gold
*/
svg {
border: 1px solid #dddddd;
fill: none;
}
polyline:first-child {
stroke: teal;
stroke-width: 80;
stroke-linecap: square;
}
polyline:nth-child(2) {
stroke: lightseagreen;
stroke-width: 50;
stroke-linecap: round;
stroke-linejoin: round;
}
polyline:last-child {
stroke: gold;
stroke-width: 10;
stroke-linejoin: bevel;
}