hexagono - triangulo css before

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

Question

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.

Answer 1

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

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

Lona

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>

Answer 2

Puedes usar algún CSS como este:

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

<div id="trapezoid"></div>

Es realmente genial hacer todas estas formas. Echa un vistazo a las formas más bonitas en:

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

EDIT: este css se aplica a un elemento DIV

Answer 3

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.