純CSS打造兼容各種瀏覽器的幾何圖形打包

2024-07-11 08:48:08

字體：大中小

來源：轉載

供稿：網友

這雖然工作量不大；但是對于開發人員來說，有時你可能只是需要一個簡單的三角形；這個時候無論是自己打開圖形軟件做一個還是讓美工做一個給你，都可能會打斷你的思路，現在你再也不用為了一個簡單的幾何圖形而借助于圖形處理軟件了。因為用CSS就可以實現，而且非常簡單。

看看下面的圖片：

你可能覺得這并沒有什么，就算是一個初學圖形處理的同學也可以輕易的做出來；但是我要說的是，這些圖形都是使用CSS繪制出來的，沒有使用任何圖片；而且是放大縮小也不會失真。是不是很神奇呢？接著往下看，我將告訴你如何實現這樣的效果。

其實也沒什么，因為實現這樣的效果所使用的CSS就是“border”。只不過我們通過設置“border-width || border-style || border-color ”再加上“width和height”就可以實現各式各樣的形狀了。

我們先來做一個向右的三角形：

<div style="border-color: #FFF #FFF #FFF #000;border-style: solid;border-width:50px 0 50px 50px;width:0;height:0;"></div>

再來一個向左的：

<div style="border-color: #FFF #000 #FFF #FFF;border-style: solid;border-width:50px 50px 50px 0;width:0;height:0;"></div>

再來個向上的梯形：

<div style="border-color: #FFF #FFF #000 #FFF;border-style: solid;border-width:0 50px 50px 50px;width:50px;height:0;"></div>

是不是很簡單呢？趕快試試吧！
點擊這里下載包含圖片上所有行裝的源文件。

上一篇：使用不帶單位的line-height

下一篇：CSS3轉換功能transform主要屬性值分析及實現分享