web-dev-qa-db-fra.com

Forme de trapèze CSS sensible

Je cherche à créer une forme trapézoïdale sensible pouvant être au format CSS, SVG ou Canvas.

 Trapezoid Shape

J'ai été capable de créer la forme de triangle mais pas une forme trapézoïdale qui est sensible.

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

J'ai déjà vu qu'il y a beaucoup de questions sur SO qui englobent déjà une forme trapézoïdale mais très peu ont des raisons pour lesquelles elles sont meilleures que d'autres méthodes et une grande majorité ne sont pas réactives.

Par exemple, ces questions ne nécessitent pas de réactivité et les réponses ne sont donc pas réactives:

htmlcsscss3svgcss-shapes
12
Stewartside

Il existe de nombreuses façons de créer la forme trapézoïdale et chacune a ses propres avantages et inconvénients.

Vous trouverez ci-dessous une liste complète des différentes manières et toutes devraient être réactives.

Bordure CSS

Le plus bien pris en charge de toutes les réponses. Il est pris en charge depuis IE et sur tous les autres navigateurs, sur le bureau comme sur le mobile.

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

Perspective CSS

Une approche relativement nouvelle dans CSS est la méthode de perspective dans CSS Transforms. Il est maintenant raisonnablement bien supporté par tous les navigateurs modernes, mais il peut être assez difficile d’obtenir la taille de forme exacte souhaitée.

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

CSS Clip-Path

Clip-path crée un clip de style SVG et l’utilise pour créer la forme souhaitée. C’est le moyen le plus simple (du moins à mon avis) de créer n’importe quelle forme avec du CSS pur mais il n’est pas très bien pris en charge, même dans les navigateurs modernes.

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

Skew CSS avec pseudo-éléments

Cette réponse m'a été donnée par web-tiki

Elle est similaire à la réponse en perspective en ce sens qu'elle utilise des transformations mais utilise également des pseudo-éléments dont l'inclinaison est activée.

#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 signifie Scalable Vector Graphic. Le navigateur Web le considère comme une image, mais vous pouvez ajouter du texte et des éléments HTML normaux dans un fichier SVG.

Il est bien supporté par tous les navigateurs, comme visible ici: 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>

Toile

Canvas est similaire à SVG mais utilise un raster (basé sur les pixels) au lieu d’un vecteur pour créer la forme.

Le support du navigateur pour Canvas est assez bon.

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

Je vais ajouter la méthode manquante de la réponse ci-dessus:

Fond multiple et dégradé linéaire

#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