如何使CSS三角形（有邊框）跨瀏覽器

然而，渲染是不能跨越的主要瀏覽器是一致的（鉻， Firefox，IE）。

有關如何以更可靠的方式達到同樣效果的任何想法？

顯然我可以使用圖像，但我更喜歡CSS，因爲它更容易在CSS中編輯顏色（而不是創建新圖像）。

我不能僅僅使用三角形字符，因爲元素背後有紋理背景，所以我需要透明度。

2012-05-23 Ryan

對於現代的瀏覽器可以使用CSS tranforms（用於IE，這將是9以上）

所以你與頂部/右邊界框和旋轉它45度。

這種方式可以簡化HTML和剛剛與:after和:before（每一個是提示之一）更新了演示鏈接

2012-05-23 21:04:02

我會給你「最好的答案」，因爲你做了很好的努力，儘管這仍然沒有達到我想要做的。（看看它如何看起來很時髦的背景？http://jsfiddle.net/FJEFP/2/） – Ryan

@Ryan，你可以改變'div.left：before'的背景顏色，但是......它不是真正的透明.. http://jsfiddle.net/gaby/FJEFP/3/ –

無論如何，我印象非常深刻。謝謝你的幫助！ – Ryan

我想你會有更好的運氣放置UTF-8三角形，兩個在一端，另一個在另一端，而不是依賴於邊界黑客。

2012-05-23 20:30:36

申請的箭頭，並添加了備註我如何需要透明度。 – Ryan

沒有什麼能夠阻止你在這些角色上使用不透明度。 –

回答