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

Lorsque vous accédez à la page http://m.google.com à l'aide de Mobile Safari, vous verrez le beau bar. en haut de la page.

Je veux dessiner des trapèzes (US: trapezoids) comme ça, mais je ne sais pas comment. Devrais-je utiliser la transformation 3D CSS3? Si vous avez une bonne méthode pour y parvenir, merci de me le dire.

23
Peut-être qu'il me manque quelque chose, mais n'est-ce pas simplement une image en dégradé appliquée à une balise body? Si oui, vous pouvez utiliser des gradients CSS3 ... Je ne sais pas ce que signifie "trapèzes".
ajouté l'auteur chovy, source
Vous voulez dire la barre de navigation? C'est une image: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
ajouté l'auteur Blender, source
Aux États-Unis, on parle de "trapèze" pour un quadrilatère avec une paire de côtés parallèles et de "trapèze" pour un quadrilatère sans côtés parallèles. En dehors des États-Unis, "trapezium" = US :: "trapezoid", et US :: "trapezium" est simplement "irrégulier". Savoir c'est la moitié de la bataille ~
ajouté l'auteur Andrew Kozak, source

3 Réponses

Vous pouvez utiliser des CSS comme ceci:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

C'est vraiment cool de faire toutes ces formes, jetez un oeil à d'autres formes plus jolies à:

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

MODIFIER: Ce CSS est appliqué à un élément DIV

38
ajouté
merci beaucoup !!! j'avais déjà vu ce site mais je l'avais oublié hier soir! j'ai résolu le problème.vraiment merci!
ajouté l'auteur CashLee李秉骏, source
@Kishan: Découvrez cette réponse pour le trapézoïde réactif stackoverflow.com/a/26628030/933633
ajouté l'auteur TheCarver, source
monsieur, je veux la forme trapziod sensible. pouvez-vous m'en dire plus?
ajouté l'auteur Kishan, source
je vous en prie, c’est l’un de mes sites préférés, vous y trouverez de nombreuses informations utiles.
ajouté l'auteur ElHacker, source

Comme c'est assez vieux maintenant, je pense que cela pourrait être utile avec de nouvelles réponses mises à jour avec de nouvelles technologies.

CSS Transform Perspective

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

Canvas

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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();


</div> </div>

26
ajouté

Vous avez quelques options à votre disposition. 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. Dessiner en svg est un peu plus complexe et il n'est pas garanti qu'il fonctionne dans tous les domaines.

En revanche, utiliser des transformations CSS signifierait que vous devez placer vos div de forme à l'arrière-plan, puis superposer le texte réel au-dessus d'eux dans un autre élément afin que le texte ne soit pas également incliné. Encore une fois, le support du navigateur n'est pas garanti.

1
ajouté