問題描述
我有一個使用這個 CSS 的三角形 (JSFiddle):
I have a triangle (JSFiddle) using this CSS:
.triangle {
width: 0;
height: 0;
border-top: 0;
border-bottom: 30px solid #666699;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
還有這個 HTML:
<div class="triangle"></div>
這會形成一個三角形，但對角線是鋸齒狀和像素化的.我怎樣才能使它們光滑?(我能夠在 Safari 和 Chrome 中通過將它們打點來平滑它們，但這打破了 Firefox 和 IE 中的三角形.)
This makes a triangle, but the diagonal lines are jagged and pixelated. How can I make them smooth? (I was able to smooth them out in Safari and Chrome by making them dotted, but that broke the triangles in Firefox and IE.)
推薦答案
即使在純 CSS 中我們也可以得到平滑的對角線.
Even in pure CSS we can get the smooth diagonals.
.triangle {
width: 0;
height: 0;
border-top: 0;
border-bottom: 30px solid #666699;
border-left: 20px solid rgba(255, 255, 255, 0);
border-right: 20px solid rgba(255, 255, 255, 0);
}
您可以使用 rgba(255, 255, 255, 0) 來代替透明.這再次給出透明.但是 alpha=0 會產生平滑的對角線.
Instead of giving transparent you can make use of rgba(255, 255, 255, 0). This again gives transparent. But the alpha=0 makes smooth diagonals.
檢查 rgba 的瀏覽器支持 css-tricks.com/rgba-browser-support
Check the browser support for rgba css-tricks.com/rgba-browser-support
謝謝
這篇關于如何制作邊緣平滑的 CSS 三角形?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！