Tạo hình thang có đường viền và nền trong suốt?

Question

Tôi biết với một số border tricks, tôi có thể tạo hình dạng hình thang. Tôi cũng có thể thiết lập màu đường viền của nó thành rgba (r, g, b, a) để làm cho nó trong suốt.

Nhưng có thể tạo hình thang có viền và nền trong suốt không?

Xem bên dưới hình ảnh cho một ví dụ,

Hiện nay, tôi sử dụng một số hình ảnh png để đạt được hiệu ứng này, nhưng việc tạo ra hình ảnh của các kích cỡ khác nhau thực sự là một công việc nhàm chán, vì vậy tôi đang tìm một . css soluation

Answer 1

Cá nhân, tôi nghĩ rằng đó là quá mức cần thiết, nhưng nó có thể được thực hiện như thế này:

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

---

Nó hoạt động trong Firefox, Chrome, Opera và Safari (Tôi sợ để kiểm tra nó trong IE9, mặc dù cả hai transform và background-clip làm việc) nhưng chỉ khi width cho .outer có một giá trị đó là một bội số của 100px.

Trừ khi sử dụng width đó là bội số của 100px, nó chỉ hoạt động trong Firefox và Chrome (có một chút trục trặc trong Chrome - có thể được khắc phục bằng cách sử dụng Gradient chỉ từ trái sang phải sang phải) màu xanh bán trong suốt thực sự gần với sự bắt đầu).

Nó phá vỡ trong Opera và Safari (nếu sử dụng một width đó không phải là một bội số của 100px):

Answer 2

Bạn có thể làm cho màu bg và biên giới màu sắc trong suốt, nhưng biên giới sẽ không theo hình dạng của hình thang:

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

Vì vậy, đặt cược tốt nhất của bạn là gắn bó với các png ngay bây giờ.