用CSS邊框防止奇怪的'凹凸'

使用CSS通過使用'border-width'參數創建三角形。用CSS邊框防止奇怪的'凹凸'

<div id="my-weird-triangle"></div> 
<style type="text/css"> 
    #my-weird-triangle{ 
     border-color: blue black black blue; 
     border-style:solid; 
     border-width:50px 50px 50px 50px; 
     width:0; 
     height:0; 
    } 
</style>

創建像

Weird big

根據您的屏幕輸出，你可能會或可能不會注意到，但如果放大到三角形的中心有一個小（可能1px的）「凸塊」這使得三角形看起來很奇怪

Weird small

如何將得到一個純CSS [3]直角噸在中間沒有這個奇怪的凹凸？

來源

2012-02-03 Smudge

什麼瀏覽器/操作系統你看到這個？我只是做了一個jsfiddle，對我來說看起來很好。 – MrMisterMan 2012-02-03 16:58:46

Firefox，OS/X。 FF和Chrome看起來都一樣。 Safari和Opera很好。我不在乎IE（我也沒有） – Smudge 2012-02-03 17:06:24

這可能是一個瀏覽器/操作系統特定的渲染問題，除了調整邊框尺寸之外，你無法做任何事情。 – j08691 2012-02-03 17:11:07

如果更改每個邊框顏色，您會注意到頂部和底部三角形不會觸碰。您可以將寬度更改爲1px以更正它。

#my-weird-triangle{ 
     border-color: blue black black blue; 
     border-style:solid; 
     border-width:50px 50px 50px 50px; 
     width:1px; 
     height:0; 
    }

來源

2012-02-03 17:53:57 Duopixel

只能使用兩個邊界的，所以不會有一個凹凸：

#my-weird-triangle2{ 
    border-color: blue black black blue; 
    border-style:solid; 
    border-width:100px 100px 0 0; 
    width:0; 
    height:0; 
}

而且這裏有一個例子：http://dabblet.com/gist/1731728

來源

2012-02-03 18:53:50 kizu

用CSS邊框防止奇怪的'凹凸'

回答

相關問題