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

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 都工作)但前提是.outer 的 width 的值是 100px 的倍数。

除非使用 100px 的倍数的 width，否则它只能在 Firefox 和 Chrome 中工作(Chrome 中有一个小故障 - 可以通过使用 WebKit 来修复- 只有从左到右的线性渐变，从透明到真正接近开始的半透明蓝色急剧变化。

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