Wiem z niektórymi border tricks, mogę utworzyć kształt trapezu. Mogę również ustawić kolor jego obramowania na rgba (r, g, b, a), aby uczynić go przezroczystym.Utwórz trapez, który ma przezroczyste obramowania i tło?

Ale czy można utworzyć trapez, który ma przezroczyste obramowania i tło?

Patrz zdjęcie poniżej przykład

enter image description here

Obecnie używam kilka obrazów PNG, aby osiągnąć ten efekt, ale generujące obrazy o różnej wielkości jest naprawdę nudna praca, więc szukam . css soluation

Źródło

2012-09-19 lostyzd

Nicea wyzwanie! Zobaczę, co mogę zrobić ... – Ana

Osobiście uważam, że to przesada, ale można to zrobić tak:

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); }

To działa w Firefox, Chrome, Opera i Safari (bałem się go przetestować w IE9, choć zarówno transform i background-clip pracy), ale tylko wtedy, gdy width dla .outer ma wartość, która jest wielokrotnością 100px.

ile użyciu width, która jest wielokrotnością 100px, to działa tylko w Firefox i Chrome (jest trochę usterki w Chrome - mogą być naprawione przy użyciu WebKit tylko od lewej do prawej gradientu liniowego, który ostro idzie od przezroczysty ten półprzezroczysty niebieski naprawdę blisko początku).

Chrome