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

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

Trapezoid Shape

я смог создать форму треугольника, но не трапециевидную форму, которая реагирует.

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

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

в качестве примера эти вопросы не требуют отзывчивости, и поэтому ответы не реагируют:

10
css css-shapes css3 html svg

2 ответов

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

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

CSS граница

наиболее хорошо поддерживается из всех ответов. Это supportwed путь обратно к IE и во всех других браузерах как на настольных и мобильных.

#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}
<div id="trapezoid"></div>

перспектива CSS

довольно новый подход в CSS-это метод перспективы в преобразованиях CSS. В настоящее время достаточно хорошо поддерживается во всех современных браузерах, но может быть довольно трудно получить точный размер вы хотите.

#trapezoid {
  margin-top: 3vw;
  width: 20vw;
  height: 10vw;
  background-color: red;
  transform: perspective(20vw) rotateY(45deg);
}
<div id="trapezoid"></div>

CSS Clip-Path

Clip-paths создайте клип стиля SVG и использует его для создания фигуры, которую вы хотите. Это самый упрощенный способ (по крайней мере, на мой взгляд) создавать любые формы с помощью только чистого CSS, но не очень хорошо поддерживается даже в современных браузерах.

#trapezoid {
  width: 20vw;
  height: 20vw;
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
  background: red;
}
<div id="trapezoid"></div>

CSS перекос с псевдоэлементами

этот ответ дал мне web-tiki

это похоже на перспективный ответ в том, что он использует преобразования, но также использует псевдо-элементы, которые имеют наклон вместо этого.

#trapezoid {
  position: relative;
  background: red;
  width: 20vw;
  height: 12vw;
  margin: 8vw 0;
}
#trapezoid:before,
#trapezoid:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: 100% 0;
  transform: skewY(-20deg);
}
#trapezoid:before {
  transform: skewY(20deg);
}
<div id="trapezoid"></div>

SVG

SVG означает масштабируемую векторную графику. Веб-браузер рассматривает его как изображение, но вы можете добавить текст и обычные HTML-элементы в SVG.

он хорошо поддерживается во всех браузерах, как видимый здесь:CanIUse

<svg id="trapezoid" viewbox="0 0 100 100" preserveAspectRatio="none" width="20%">
  <path d="M0,0
           L100,20
           L100,80
           L0,100z" fill="red"></path>
</svg>

холст

Canvas похож на SVG, но использует растр (пиксельный) вместо вектора для создания фигуры.

поддержка браузера для Canvas является неплохо.

var shape = document.getElementById('trapezoid').getContext('2d');
shape.fillStyle = 'red';
shape.beginPath();
shape.moveTo(0, 0);
shape.lineTo(100, 20);
shape.lineTo(100, 80);
shape.lineTo(0, 100);
shape.closePath();
shape.fill();
<canvas id="trapezoid"></canvas>
29

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

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

#trapezoid {
  width: 200px;
  height: 100px;
  background:
    linear-gradient(red,red) 0 20px/100% calc(100% - 40px) no-repeat,
    linear-gradient(to bottom left, transparent 49%,red 51%)0 0/100% 20px no-repeat,
    linear-gradient(to top left, transparent 49%,red 51%)100% 100%/100% 20px no-repeat;
    animation:change 2s linear infinite alternate;
}

@keyframes change {
  from {
    width: 200px;
    height: 100px;
  }
  to {
    width: 120px;
    height: 180px;
  }
}
<div id="trapezoid"></div>
1