利用CSS3畫三角形(另附百度筆試題)

2021-08-02 18:47:50 字數 893 閱讀 2317

css3畫三角形的原理十分簡單,利用到的屬性無非幾種:width、height、content、border。

拿乙個矩形舉例:

顯示效果:

問題來了:為什麼我已經將矩形的寬高和內容都置空了,仍然會有矩形出現呢?

答案是:你所看到的矩形是由四個實心邊框組合起來的。

不信你看下面:

顯示效果:

我所做的修改是:加了頂部邊框的樣式,將頂部邊框設定為透明。

看到這裡,大家應該明白了吧,在矩形的寬高都是0的時候,矩形的實心邊框都擠在了一起,在每兩條邊相接的部分二者等分,這樣就造成了四個三角形組合為乙個矩形的效果,自熱而然,如果將其它三個三角形設定為透明色,那麼剩下的乙個就是被人眼所看見的三角形了。

題目不用描述了,就是去讓你用css去搞定這樣乙個圖案。不多說,先上菜:

那個凸出來的三角框其實是用兩個三角形疊加出來的,用before偽類去實現底部的黑色不透明三角形,用after偽類去實現before上部的透明三角形,利用after去遮蓋before,未遮蓋的部分即為你所看到的三角形邊框。

效果圖:

--end--

css畫三角形

好久沒寫css了,練練手,剛看了下在以前公司做過的乙個 現在已經改版,裡面有個模組涉及到用css畫三角形,試著做了一下,分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素,隨便什麼元素,不過我習慣性的會用塊元素來做。如果行內元素就displ...

CSS 畫三角形

使用 css 畫三角形?第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意,邊框相接的地方,即相鄰邊框的樣式。因為我們平時使用邊框,一般只幾畫素寬,所以可以不注意它們相接的樣式,但當邊框達到50畫素寬,就可以清楚看到,它們在相接時是如何處理的 這是...

css畫三角形

解析 border width 100px 100px 100px 200px border color transparent transparent transparent eb1111 屬性值值說明 color 指定背景顏色。transparent 指定邊框的顏色應該是透明的。這是預設 inh...