Wie zeichne ein Trapez/Trapez mit CSS3?

Wenn Sie mit Mobile Safari auf die Seite http://m.google.com gelangen, sehen Sie die schöne Leiste oben auf der Seite.

Ich möchte ein paar Trapeze (US: Trapeze) so zeichnen, aber ich weiß nicht wie. Soll ich css3 3d transform verwenden? Wenn Sie eine gute Methode haben, um es zu erreichen, sagen Sie mir bitte.

23
Vielleicht vermisse ich etwas, aber ist es nicht nur ein Farbverlaufsbild, das auf den Body-Tag angewendet wird? Wenn ja, könnten Sie css3-Gradienten verwenden ... Ich weiß nicht, was "Trapez" bedeutet.
hinzugefügt der Autor chovy, Quelle
Du meinst die Navigationsleiste? Es ist ein Bild: google.com/mobile/ Bilder/mgc3/mgc-body-toolbar-bg-banner.png
hinzugefügt der Autor Blender, Quelle
In den USA sagen wir "trapezförmig" für ein Viereck mit einem Paar paralleler Seiten und "trapezförmig" für ein Viereck ohne parallele Seiten. Außerhalb der USA ist "Trapez" = US :: "Trapez" und US :: "Trapez" nur "unregelmäßig". Wissen ist die halbe Miete ~
hinzugefügt der Autor Andrew Kozak, Quelle

3 Antworten

Sie können einige CSS wie folgt verwenden:

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

Es ist wirklich cool, all diese Formen zu machen, werfen Sie einen Blick auf mehr schöne Formen bei:

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

BEARBEITEN: Diese CSS wird auf ein DIV-Element angewendet

38
hinzugefügt
Vielen Dank !!! Ich hatte diese Website schon einmal gesehen, aber ich habe es letzte Nacht vergessen! Ich habe das Problem gelöst. Wirklich Danke!
hinzugefügt der Autor CashLee李秉骏, Quelle
@ Kishan: Überprüfen Sie diese Antwort für Responsive Trapez stackoverflow.com/a/26628030/933633
hinzugefügt der Autor TheCarver, Quelle
Sir, ich möchte reagieren Trapziod Form. Kannst du mir etwas darüber erzählen?
hinzugefügt der Autor Kishan, Quelle
Gern geschehen, es ist eine meiner Lieblingsseiten, dort finden Sie viele nützliche Informationen.
hinzugefügt der Autor ElHacker, Quelle

Da dies jetzt ziemlich alt ist, könnte es mit einigen neuen, aktualisierten Antworten mit einigen neuen Technologien verwendet werden.

CSS-Transformationsperspektive

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

Segeltuch

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

var c = document.getElementById("mySegeltuch");
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
hinzugefügt

Ihnen stehen einige Optionen zur Verfügung. Sie können einfach ein Bild verwenden, etwas mit Svg zeichnen oder ein reguläres div mit CSS-Transformationen verzerren. Ein Bild wäre am einfachsten und würde über alle Browser funktionieren. Das Zeichnen in Svg ist ein bisschen komplexer und es ist nicht garantiert, dass es auf der ganzen Linie funktioniert.

Die Verwendung von css-Transformationen auf der anderen Seite würde bedeuten, dass Sie Ihre Shape-Divs im Hintergrund haben müssen, und dann den eigentlichen Text über sie in einem anderen Element legen müssen, damit der Text nicht verzerrt wird. Auch hier ist die Browserunterstützung nicht garantiert.

1
hinzugefügt