Испытание: зигзаг [11/20] 100%


#1
<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>

#2
У меня так получилось))
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;
}


#3

Мой вариант

Зигзаги
/* Используемые цвета:
  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;
}