Geek asks and answers

Create a trapezoid with transparent borders and background?

I know with some border tricks , I could create a trapezoid shape. I can also set my border color to rgba (r, g, b, a) to make it transparent.

But is it possible to create a trapezoid with transparent borders and background?

Below is an example image,

enter image description here

I am currently using some png images to achieve this effect, but generating images of different sizes is a very boring job, so I'm looking for a css concession.

+5
source share
2 answers

Personally, I think this is unnecessary, but it can be done as follows:

demonstration

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

Firefox, Chrome, Opera Safari ( IE9, transform background-clip), width .outer , 100px.

width, 100px, Firefox Chrome ( Chrome), , WebKit, , ).

Chrome

Opera Safari ( width, 100px):

OperaSafari

+8

bg border , :

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

, png .

+1

More articles:


All Articles