Hoe een trapezium/trapezium te tekenen met css3?

Wanneer u met Mobile Safari op de pagina http://m.google.com gaat, ziet u de mooie balk op de bovenkant van de pagina.

Ik wil trapeziums (VS: trapezoïden) zo tekenen, maar ik weet niet hoe. Moet ik css3 3d transform gebruiken? Als je een goede methode hebt om het te bereiken, vertel het me dan.

23
Misschien mis ik iets, maar is het niet alleen een gradiëntafbeelding toegepast op body-tag? Als dat zo is, zou je css3-gradiënten kunnen gebruiken ... Ik weet niet wat 'trapeziums' betekent.
toegevoegd de auteur chovy, de bron
Je bedoelt de navigatiebalk? Het is een afbeelding: google.com/mobile/ images/mgc3/MGC-body-toolbar-bg-banner.png
toegevoegd de auteur Blender, de bron
In de VS zeggen we "trapezium" voor een vierhoek met één paar parallelle zijden en "trapezium" voor een vierhoek zonder parallelle zijden. Buiten de VS is "trapezium" = US :: "trapezium" en US :: "trapezium" is slechts "onregelmatig". Weten is de helft van de strijd ~
toegevoegd de auteur Andrew Kozak, de bron

3 antwoord

Je kunt CSS als volgt gebruiken:

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

Het is echt gaaf om al deze vormen te maken, kijk eens naar meer leuke vormen bij:

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

BEWERK: Deze CSS wordt toegepast op een DIV-element

38
toegevoegd
heel erg bedankt !!! Ik had deze website eerder gezien maar ik ben hem gisteravond vergeten! Ik heb het probleem opgelost. Echt bedankt!
toegevoegd de auteur CashLee李秉骏, de bron
@Kishan: bekijk dit antwoord voor responsieve trapezoïde stackoverflow.com/a/26628030/933633
toegevoegd de auteur TheCarver, de bron
mijnheer, ik wil een responsieve trapziod-vorm. kun je me er iets over vertellen?
toegevoegd de auteur Kishan, de bron
graag gedaan, het is een van mijn favoriete sites, daar vind je veel nuttige informatie.
toegevoegd de auteur ElHacker, de bron

Aangezien dit nu vrij oud is, heb ik het gevoel dat het kan worden gebruikt met enkele nieuwe bijgewerkte antwoorden met een aantal nieuwe technologieën.

CSS-transformatieperspectief

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

Je hebt een paar opties voor je beschikbaar. Je kunt gewoon een afbeelding gebruiken, iets tekenen met svg of een reguliere div vervormen met css-transformaties. Een afbeelding is het gemakkelijkst en werkt in alle browsers. Tekenen in svg is een beetje ingewikkelder en het is niet gegarandeerd dat het over de hele linie werkt.

Het gebruik van css-transformaties aan de andere kant zou betekenen dat je je shape-divs op de achtergrond moet hebben, en dan de eigenlijke tekst eroverheen in een ander element dan dat de tekst ook niet scheef staat. Nogmaals, browserondersteuning is niet gegarandeerd.

1
toegevoegd