¿Cómo dibujar un trapecio/trapecio con css3?

Cuando vaya a la página http://m.google.com utilizando Mobile Safari, verá la hermosa barra en la parte superior de la página.

Quiero dibujar unos trapecios (EE. UU .: trapezoides) así, pero no sé cómo. ¿Debo usar css3 3d transform? Si tienes un buen método para lograrlo por favor dímelo.

23
Quizás me esté perdiendo algo, pero ¿no es solo una imagen de gradiente aplicada a la etiqueta del cuerpo? Si es así, puedes usar gradientes css3 ... No sé qué significa "trapecio".
agregado el autor chovy, fuente
¿Te refieres a la barra de navegación? Es una imagen: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
agregado el autor Blender, fuente
En los Estados Unidos, decimos "trapezoide" para un cuadrilátero con un par de lados paralelos, y "trapecio" para un cuadrilátero sin lados paralelos. Fuera de EE. UU., "Trapecio" = EE. UU .: "trapecio", y EE. UU .: "trapecio" es simplemente "irregular". Saber es la mitad de la batalla ~
agregado el autor Andrew Kozak, fuente

3 Respuestas

Puedes usar algún CSS como este:

<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 realmente genial hacer todas estas formas. Echa un vistazo a las formas más bonitas en:

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

EDITAR: Este CSS se aplica a un elemento DIV

38
agregado
¡Muchas gracias! Había visto este sitio web anteriormente, ¡pero lo olvidé anoche! He resuelto el problema. ¡Muchas gracias!
agregado el autor CashLee李秉骏, fuente
@Kishan: Echa un vistazo a esta respuesta para ver el trapecio sensible stackoverflow.com/a/26628030/933633
agregado el autor TheCarver, fuente
Señor, quiero una forma de trampeo sensible. ¿Puedes decirme algo al respecto?
agregado el autor Kishan, fuente
de nada, es uno de mis sitios favoritos, puede encontrar mucha información útil allí.
agregado el autor ElHacker, fuente

Como esto es bastante antiguo ahora, creo que podría usarse con algunas respuestas nuevas y actualizadas con algunas nuevas tecnologías.

Perspectiva de transformación CSS

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

Lona

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

var c = document.getElementById("myLona");
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
agregado

Tienes algunas opciones disponibles para ti. Simplemente puede usar una imagen, dibujar algo con svg o distorsionar un div normal con transformaciones css. Una imagen sería más fácil y funcionaría en todos los navegadores. Dibujar en svg es un poco más complejo y no se garantiza que funcione en todos los ámbitos.

Por otro lado, usar transformaciones CSS significaría que tendrías que tener tus divs de forma en el fondo, luego colocar el texto real sobre ellos en otro elemento para que el texto no esté sesgado también. Una vez más, el soporte del navegador no está garantizado.

1
agregado