Crear una forma trapezoidal de Isoceles

Me pregunto si podría producir algo similar a esto con CSS:

enter image description here

Y también me pregunto si este es el lugar correcto para una pregunta semejante. No he intentado nada de código, he hecho las imágenes marrones con Photoshop.

Gracias por cualquier ayuda !

    Esta forma (un Trapezoide de Isoceles ) se puede hacer fácilmente usando CSS3 girando un div con un poco de perspectiva .

    Explicación

    1. La forma se logra al rotar un pseudo-elemento absolutamente posicionado ( .container:after ) a lo largo del eje x con una perspectiva.
    2. No estamos rotando el contenedor div real porque haría que el enlace (y cualquier otro) texto dentro de él también se rotar.
    3. El borde superior y una sombra de cuadro insertado se utilizan para imitar la forma exactamente como se muestra en la figura en cuestión. El borde superior produce la línea con un tono más claro en la parte superior y la sombra insertada produce los bordes oscuros alrededor de la forma.
    4. Dado que las transformaciones de rotación no son compatibles en las versiones inferiores de IE, la forma no vendría en IE <9. Sin embargo, se degradaría con gracia en un cuadro con forma de rectángulo en IE 8 y 9.
    5. IE 7 no es compatible con pseudo-elementos y, por lo tanto, incluso que el cuadro no aparecerá, pero los enlaces aparecerán tal como están. Sin embargo, el mismo comportamiento que en IE 8/9 podría lograrse al agregar CSS condicional (agregar fondo y sombras al contenedor div ) para apuntar solo a IE 7.
     body { font-family: Calibri; background: #5F4014; } .container { position: relative; width: 90%; text-align: center; margin: 50px 5px; } .container:after { position: absolute; content: '\00a0'; width: 100%; left: 10px; top: 0px; padding: 10px; background: #4F0D00; box-shadow: inset 0px 0px 10px 2px #340800; border-top: 1px solid #715E49; -webkit-transform: perspective(25px) rotateX(-3deg); -moz-transform: perspective(25px) rotateX(-3deg); transform: perspective(25px) rotateX(-3deg); } a { position: relative; display: inline-block; color: white; text-decoration: none; width: 100px; text-align: center; padding: 10px; z-index: 2; } a:hover { color: gold; } a:active { color: #ff6767; } 
      

    Sí tu puedes ! Hay algunas maneras, pero tendrías que usar CSS3, que no es compatible con un viejo navegador como las viejas versiones de IE. (funciona en ie9 + creo).

    Puedes ver un buen tutorial aquí:

    http://coursesweb.net/css/polygons-css_cs

    (Una forma de hacerlo usando CSS3 shaping)

    O podrías usar este tipo de código:

     
    First link
  • Second Link
  • Y utiliza este tutorial para hacer un triángulo a la izquierda y a la derecha para hacer la esquina

    http://css-tricks.com/snippets/css/css-triangle/

    (Me gusta esto)

      # -> ###################### -> # # # -> # # -> # # # # -> # # -> # # ###### -> ###################### -> ####### .Left-corner -> .center -> .right-corner 

    Asegúrese de no poner ningún borde en .center a derecha o izquierda si lo hace de esa manera, y de poner el mismo color de fondo en cada divs. ¡Creo que este método es mejor para la accesibilidad!