Оформление SVG-фигур / Испытание: зигзаг [11/20] - 100%

  <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% вариант