Comment dessiner un trapèze/trapèze avec css3?
Quand vous allez à la page http://m.google.com en utilisant le navigateur Safari Mobile, vous verrez la belle la barre sur le haut de la page.
je veux dessiner des trapèzes (nous: trapèzes) comme ça, mais je ne sais pas comment. Dois-je utiliser css3 3d transformer? Si vous avez une bonne méthode pour y arriver, dites-le-moi.
3 réponses
Vous pouvez utiliser un peu de CSS comme ceci:
#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 oeil à des formes plus belles à:
http://css-tricks.com/examples/ShapesOfCSS/
modifier: Ce css est appliqué à un élément DIV
comme ceci est assez ancien maintenant, je pense qu'il pourrait utiliser avec de nouvelles réponses mises à jour avec de nouvelles technologies.
CSS Transformation de la Perspective
.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>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 CSS transforms. Une image serait plus facile et fonctionnerait sur tous les navigateurs. Dessin svg est un peu plus complexe et n'est pas garanti pour fonctionner à travers le conseil d'administration.
utiliser CSS transforme d'un autre côté signifierait que vous devez avoir votre forme divs en arrière-plan, puis calquer le texte réel sur eux dans un autre élément à ce que le texte n'est pas biaisée. Encore une fois, le support du navigateur n'est pas garanti.