¿Crea un trapezoide que tenga bordes y fondo transparentes?

Question

Sé con algo de border tricks, podría crear forma trapezoidal. También puedo establecer su color de borde en rgba (r, g, b, a) para hacerlo transparente.

¿Pero es posible crear un trapezoide que tenga bordes y fondo transparentes?

Ver debajo por ejemplo,

la actualidad, utilizo algunas imágenes PNG para lograr este efecto, pero la generación de imágenes de diferentes tamaños es un trabajo muy aburrido, así que estoy buscando una . soluation css

Answer 1

Personalmente, creo que es una exageración, pero se puede hacer así:

demo

HTML:

<div class='outer'> 
    <div class='content'><!--stuff here--></div> 
    <div class='label l1'></div> 
    <div class='label l2'></div> 
</div> 

CSS:

.outer { 
    position: relative; 
    width: 500px; /* whole thing breaks if this is not a multiple of 100px */ 
    border: solid .5em rgba(0,0,255,.5); 
    border-bottom: solid 0px transparent; 
    margin: 7em auto 0; 
    background: rgba(0,0,0,.5); 
    background-clip: padding-box; 
} 
.outer:before, .outer:after { 
    position: absolute; 
    top: 100%; 
    height: .5em; 
    background: rgba(0,0,255,.5); 
    content: '' 
} 
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; } 
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; } 
.content { 
    padding: .5em; 
    margin: 1.5em; 
    border-bottom: solid 1.5em transparent; 
    background: lightblue; 
    background-clip: padding-box; 
} 
.label { 
    overflow: hidden; 
    position: absolute; 
    top: 100%; 
    width: 15%; 
    height: 3em; 
} 
.l1 { left: 15%; } 
.l2 { left: 30%; } 
.label:before { 
    position: absolute; 
    top: -.5em; 
    width: 100%; 
    height: 2.5em; 
    border: solid .5em rgba(0,0,255,.5); 
    background: rgba(0,0,0,.5); 
    background-clip: padding-box; 
    content: ''; 
} 
.l1:before { left: 9%; transform: skewX(30deg); } 
.l2:before { right: 9%; transform: skewX(-30deg); } 

---

Funciona en Firefox, Chrome, Opera y Safari (que tenía miedo de probarlo en IE9, aunque ambos transform y background-clip trabajo), pero sólo si el width para .outer tiene un valor que es un múltiplo de 100px.

A menos que el uso de un width que es un múltiplo de 100px, sólo funciona en Firefox y Chrome (hay un pequeño fallo en Chrome - podría ser fijado mediante un WebKit de sólo izquierda a gradiente lineal derecha que va fuertemente de transparente a ese azul semitransparente realmente cerca del comienzo).

Se rompe en Opera y Safari (si se utiliza un width que no es un múltiplo de 100px):

Answer 2

puede hacer que el color BG y fronterizas colores transparentes, pero las fronteras no va a seguir la forma del trapezoide:

http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/

Así que su mejor opción es quedarse con los pngs por ahora.