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

Question

我知道通过一些边框技巧，我可以创建梯形。我还可以将其边框颜色设置为 rgba(r,g,b,a) 以使其透明。

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

例如，请参见下图，

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

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

---

它适用于 Firefox、Chrome、Opera 和 Safari（我不敢在 IE9 中测试它，尽管两者都transform有效background-clip），但前提是widthfor.outer的值是100px.

除非使用 的width倍数100px，否则它仅适用于 Firefox 和 Chrome（Chrome 中存在一个小故障 - 可以通过使用仅 WebKit 的从左到右线性渐变来修复，该渐变从透明急剧变为半透明蓝色，非常接近开始）。

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

Answer 2

您可以使 bg 颜色和边框颜色透明，但边框不会跟随梯形的形状：

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

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