【问题标题】：Create a trapezoid that has transparent borders and background?创建一个具有透明边框和背景的梯形？
【发布时间】：2015-05-09 11:52:37
【问题描述】：

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

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

示例见下图，

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

【问题讨论】：

不错的挑战！我会看看我能做什么......

标签： javascript html css css-shapes

【解决方案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 的 .outer 的值是100px 的倍数。

除非使用 width 是 100px 的倍数，否则它仅适用于 Firefox 和 Chrome（Chrome 中存在一些小故障 - 可以通过使用 WebKit 专用的左到右线性渐变来解决从透明到半透明的蓝色，真的很接近开始）。

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

【讨论】：

将500px 值用于width 的.outer，是的。但是，如果您将该值更改为假设为 32em，那么它会像屏幕截图中一样中断。

【解决方案2】：

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

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

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

【讨论】：