半透明の境界線を持つ純粋なCSS三角形です。可能？

Question

cssを使用するだけで、周囲に半透明の境界線を持つ矢印を描くことは可能ですか？相続人

これまでの私の努力のバイオリン： http://jsfiddle.net/calebo/fBW4u/

CSS：

.ui-overlay { 
    padding-bottom: 10px; 
    position: relative; 
} 
.ui-overlay-content { 
    background: #999; 
    color: #000; 
    padding: 8px; 
    border-radius: 4px; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
    height: 100px; 
    width: 200px; 
} 
.arrow { 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 10px 10px 0; 
    bottom: 5px; 
    left: 15px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    overflow: hidden; 
} 

Answer 1

これはまだいくつかの作業が必要ですが、ここでは一般的な考え方です：

は、擬似を使用してください45°回転させて、それにスタイリングを適用します：

.arrow { 
    bottom: -25px; 
    left: 30px; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    overflow: hidden; 
} 
.arrow:after { 
    content: ' '; 
    display: block; 
    background: red; 
    width: 20px; 
    height: 20px; 
    transform: rotate(45deg); 
    position: absolute; 
    top: -19px; 
    left: 3px; 
    background: #999; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    background-clip: padding-box; 
} 

ここでフィドルです：http://jsfiddle.net/yZ3vB/

---

これに伴う問題は国境がエッジによってそれが暗くなって、オーバーラップしていることです。

これはおそらく別の要素を追加することで解決できます。

更新：はい！ここに行く：http://jsfiddle.net/sJFTT/

---

アップデート2：あなたもその要素を追加する必要はありません。あなたは、メインボックスから擬似要素を使用することができます。

.ui-overlay-content:after { 
    content: ' '; 
    border-width: 13px; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    bottom: -10px; 
    left: 30px; 
    width: 0; 
    height: 0; 
    position: absolute; 
} 

ここでフィドルです：http://jsfiddle.net/6v9nV/

---

がアップデート3：実際には、あなただけの単一の要素でこのすべてを行うことができますと両方の擬似要素を使用することで、変換なし。 - beforeとafter：

.speech-bubble { 
    background: #999; 
    background: linear-gradient(top, #444 0%,#999 100%); 
    background-clip: padding-box; 
    border: 5px solid rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    width: 200px; 
    height: 100px; 
    position: relative; 
} 
.speech-bubble:before{ 
    content: ' '; 
    border-color: rgba(0, 0, 0, 0.2) transparent transparent; 
    border-style: solid; 
    border-width: 17px; 
    position: absolute; 
    bottom: -39px; 
    left: 16px; 
} 
.speech-bubble:after{ 
    content: ' '; 
    border-color: #999 transparent transparent; 
    border-style: solid; 
    border-width: 13px; 
    position: absolute; 
    bottom: -26px; 
    left: 20px; 
} 

---

P.S.：ここ

0はフィドルですプロダクションのベンダープレフィックスを忘れないでください！

Answer 2

あなたはノッチ画像を必要とし、その画像を絶対に右下に置く必要があります。