创建一个具有透明边框和背景的梯形？

Question

我知道有一些边界技巧,我可以创造梯形形状.我也可以将其border-color设置为rgba(r,g,b,a)以使其透明.

但是有可能创建具有透明边框和背景的梯形吗？

有关示例,请参见下图

目前,我使用一些png图像来实现这种效果,但生成不同大小的图像真的很无聊,所以我正在寻找一个css解决方案.

Answer 1

就个人而言,我认为这有点矫枉过正,但可以这样做:

演示

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

它工作在火狐,Chrome,Opera和Safari(我害怕测试它在IE9中,虽然双方transform和background-clip工作),但只有在width对.outer具有的值的倍数100px.

除非使用width它的倍数100px,它只适用于Firefox和Chrome(Chrome中有一点小故障) - 可以通过使用WebKit仅从左到右的线性渐变来修复,该渐变从透明到半透明的蓝色非常接近开始).

它在Opera和Safari中断(如果使用的width不是它的倍数100px):