Отзывчивая трапециевидная форма CSS

Я хочу создать адаптивную форму трапеции, которая может быть в CSS, SVG или Canvas.

Я был в состоянии создать форму треугольника, но не форму трапеции, которая является отзывчивой.

div {
  width: 0;
  height: 0;
  border-top: 5vw solid transparent;
  border-left: 10vw solid red;
  border-bottom: 5vw solid transparent;
}

<div></div>

Ответ 1

Существует множество способов создания формы трапеции, и каждый из них имеет свои преимущества и недостатки.

Ниже приведен полный список различных способов, и все должно быть отзывчивым.

Граница CSS

Наиболее хорошо поддерживается всеми ответами. Он поддерживается в IE и во всех других браузерах как на рабочем столе, так и на мобильных устройствах.

border - CSS | MDN

#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

<div id="trapezoid"></div>

Ответ 2

Я собираюсь добавить отсутствующий метод ответа выше:

Множественный фон и линейный градиент

#trapezoid {
  width: 200px;
  height: 100px;
  background:
    /* Center area (rectangle)*/
    linear-gradient(red,red) center /100% calc(100% - 40px),
    /* triangle shape at the top*/
    linear-gradient(to bottom left, transparent 49%,red 51%) top    / 100% 20px,
    /* triangle shape at the bottom*/
    linear-gradient(to top    left, transparent 49%,red 51%) bottom / 100% 20px;
    
  background-repeat:no-repeat;
  animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}

<div id="trapezoid"></div>