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で壊れます（widthの倍数ではないを使用している場合100px）：

Answer 2

bgの色と境界線の色を透明にすることはできますが、境界線は台形の形状に従いません。

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

したがって、最善の策は、今のところpngを使用することです。