只有CSS可以使用的特殊三角形（所以我可以更改邊框顏色）？

我有一種氣泡：http://screencast.com/t/xy3xPHYlM圓角和左邊的三角形（取決於:nth-child(odd/even)）。邊框和圓角與border和border-radius沒有問題。但我希望三角形也是CSS，所以我可以改變整個事物的邊框顏色。目前三角形是兩個三角形（左和右）的精靈。只有CSS可以使用的特殊三角形（所以我可以更改邊框顏色）？

我知道三角形可能與CSS（2偶數）：http://jsfiddle.net/rudiedirkx/eDdZb/但這些甚至不像它。任何方式使三角形看起來像截圖中的一個？我更喜歡只使用:before和:after元素，但如果需要，我可以添加更多元素。

2011-09-21 Rudie

嗨，你有沒有嘗試CSS變形歪斜？也許與旋轉相結合。您應該能夠「變形」：after元素以匹配您的設計。（我試着準備一個例子，雖然我無法在JS小提琴中得到偏斜工作：/） –

似乎在應用轉換之後，沒有辦法讓框出現在偏斜的div上（在Chrome中）http： //jsfiddle.net/duopixel/tkqYp/ – Duopixel

如果是純CSS的，它必須有一個直角。沒有辦法（我知道）。如果這不是問題，那麼使用其中的兩個，一個爲黑線，另一個爲頂部較亮，像素較小以掩蓋它。

這聽起來很像你想要一些SVG作爲最簡單的方式來繪製一條易於配置的顏色的線條。它會混亂你的標記，雖然，這聽起來你想避免。

編輯：如果您允許自己爲樣式化邊框添加額外的非語義元素，則可以管理箭頭。 See fiddle - 輕鬆適應在Chrome等工作。

2011-09-21 12:01:52

樣式表中的SVG？使用SVG數據網址？這聽起來很棒，我想要！像'背景：URL（數據：文本/ svg，）''？那你的意思是？ – Rudie

關於SVG的數據網址，我認爲Opera計劃支持它;自從我檢查了一段時間以來。也許即使是Fx的非常棒的新框架，也可以在SVG-anywhere模型中處理這種事情。實際上，我正在考慮用兩到三個SVG元素混淆標記。雖然時髦的邊框形狀的顏色仍然會由CSS控制。 –

實際上，對於您所想的更多內容，請參閱上面的編輯。 –

回答