web-dev-qa-db-fra.com

Comment dessiner un trapèze / trapèze avec CSS3?

Lorsque vous accédez à la page http://m.google.com en utilisant Mobile Safari, vous verrez la belle barre en haut de la page.

Je veux dessiner des trapèzes (US: trapèzes) comme ça, mais je ne sais pas comment. Dois-je utiliser css3 3d transform? Si vous avez une bonne méthode pour y parvenir, dites-le moi.

csshtml5css3css-shapes
27
CashLee李秉骏

Vous pouvez utiliser du CSS comme celui-ci:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>

C'est vraiment cool de faire toutes ces formes, jetez un œil à plus de belles formes sur:

http://css-tricks.com/examples/ShapesOfCSS/

EDIT: ce CSS est appliqué à un élément DIV

46
ElHacker

Comme c'est assez ancien maintenant, je pense qu'il pourrait être utilisé avec de nouvelles réponses mises à jour avec de nouvelles technologies.

Perspective de transformation CSS

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>

SVG

<svg viewBox="0 0 20 20" width="20%">
  <path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>

Toile

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<canvas id="myCanvas" width="200" height="200"></canvas>
43
Stewartside

Vous disposez de quelques options. Vous pouvez simplement utiliser une image, dessiner quelque chose avec svg ou déformer une div régulière avec des transformations CSS. Une image serait plus simple et fonctionnerait sur tous les navigateurs. Le dessin en svg est un peu plus complexe et n'est pas garanti de fonctionner dans tous les domaines.

L'utilisation de transformations CSS, d'autre part, signifierait que vous devez avoir vos divs de forme en arrière-plan, puis superposer le texte réel sur eux dans un autre élément pour que le texte ne soit pas également asymétrique. Encore une fois, la prise en charge du navigateur n'est pas garantie.

1
Jerry