<polyline points="111 61.5 217.984 61.5 123.035 180.231 229.738 180.06" stroke="teal" stroke-width="80px" stroke-linejoin="miter" stroke-linecap="square"></polyline>
<polyline points="122 61.5 217.984 61.5 123.035 180.231 218.738 180.06" stroke="lightseagreen" stroke-width="50px" stroke-linejoin="round" stroke-linecap="round"></polyline>
<polyline points="120 61.5 217.984 61.5 123.035 180.231 220.738 180.06" stroke="gold" stroke-width="10px" stroke-linejoin="bevel" stroke-linecap="butt"></polyline>
</svg>
Не совсем 100% у черных треугольников нужно убрать фон. Тогда 100%
2 лайка
100%
мой зигзаг
/* Используемые цвета:
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;
}
<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 = "80px" stroke-linejoin = "miter" stroke-linecap = "square" ></polyline>
<polyline points="122 61.5 217.984 61.5 123.035 180.231 218.738 180.06" stroke = "lightseagreen" stroke-width = "50px" stroke-linejoin = "round" stroke-linecap = "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 = "10px" stroke-linejoin = "bevel" stroke-linecap = "butt" fill = "none"></polyline>
</svg>
100% вариант