Существует много разных способов создания формы трапеции, и каждый из них имеет свои преимущества и недостатки.
Ниже в примерах приведен полный список различных способов, и все должны быть адаптивными.
CSS Border
Этот способ поддерживается в 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>
CSS Perspective
Довольно новый подход в CSS
- это метод перспективы в CSS Transforms
В настоящее время он достаточно хорошо поддерживается во всех современных браузерах, но может быть довольно сложно получить точный размер формы, который вы хотите.
perspective - CSS | MDN
#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 Skew with Pseudo Elements
Способ похож на ответ с помощью перспективы тем, что он использует transforms
, но применяются псевдоэлементы, которые имеют skew
.
skew - CSS | MDN
#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
.
Он хорошо поддерживается во всех браузерах в виде просмотра:
SVG | MDN
<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
- Caniuse
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>
Источник: Responsive CSS Trapezoid Shape @Stewartside
Свободный перевод ответа Responsive CSS Trapezoid Shape от участника @Stewartside.