CSS3 полигоны с изображениями, как?

Question

Как мне сделать эту фигуру с изображением внутри каждого блока?Каждый блок будет иметь ширину 100%.Взгляните на пример:

https://imgur.com/FIJ2qcg

У меня здесь есть многоугольник, но как я могу сделать его 100% svg и с полным фоном изображения без потери соотношения сторон?

`https://jsfiddle.net/acrr120/t9y950qy/`

Answer 1

Просто оберните ваш svg в контейнер и дайте height, который вы хотите, и дайте также overflow:hidden, таким образом вы определите высоту , которую вы хотите, и уважаякоэффициент для svg

.container {
  height: 500px;
  overflow: hidden;
}

<div class="container">
    <svg width="100%" viewBox="0 0 100 100" style="border:1px solid red">
      <polygon points="0,0 30,10 100,10 100,100 0,100" fill="red" />
    </svg>
</div>