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

Question

我知道一些border tricks，我可以创造梯形形状。我也可以将它的边框颜色设置为rgba（r，g，b，a）以使其透明。

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

参见下图，了解示例

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

Answer 1

就个人而言，我认为这有点过分，但可以这样做：

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

---

它可以在Firefox，Chrome，Opera和Safari中使用（我害怕在IE9中测试它，虽然transform和background-clip都有效）但只有width for {{ 1}}的值为.outer的倍数。

除非使用的100px是width的倍数，否则它只适用于Firefox和Chrome（Chrome中有一点小故障） - 可以通过使用WebKit从左到右线性修复渐渐地从透明到半透明的蓝色的渐变非常接近开始。）

在Opera和Safari中断（如果使用的100px不是width的倍数）：

Answer 2

你可以使bg颜色和边框颜色透明，但边框不会遵循梯形的形状：

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

所以你最好的选择就是坚持使用pngs。