it-swarm.com.ru

Отзывчивая форма трапеции 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, которые охватывают форму трапеции, но очень немногие имеют причины, по которым они лучше, чем другие методы, а также подавляющее большинство из них не отвечают.

В качестве примера, эти вопросы не требуют ответа и, следовательно, ответы не отвечают:

12
Stewartside

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

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

CSS Border

Наиболее хорошо поддерживается из всех ответов. Он поддерживается еще в 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 Transforms. Теперь он достаточно хорошо поддерживается во всех современных браузерах, но может быть довольно сложно получить нужный размер фигуры.

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

CSS Clip-Path

Клип-контуры создают клип в стиле 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 Skew с псевдоэлементами

Этот ответ дал мне 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>

32
Stewartside

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

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

#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
Temani Afif