css中的border還可以這樣玩

在看這篇文章之前你可能會覺得border只是簡單的繪製邊框，看了這篇文章，我相信你也會跟我一樣說一句「我靠，原來css中的border還可以這樣玩」。這篇文章主要是很早以前看了別人用純css繪製三角形後自己的一些思路的整理，文中會介紹幾種小圖示的效果。

是的你沒看錯，這裡是要做繪製乙個類似於雞蛋的效果。

思路：我們先用div繪製乙個正方形，然後利用設定border-radius: 50%;，這樣我們就可以得到乙個圓形的效果，**如下：

html**：

.div

思考：分析雞蛋型結構，雞蛋有點橢，但是它分大頭和小頭。我們有沒有什麼辦法先讓之前的圓變為橢圓呢？

思路：我們改變div的寬度或高度，讓它們不一致，看能不能得到我們想要的效果。

實現：我們分別改變width:50px;或height:50px;（只改變其中的乙個），這時

思考：我們已經得到橢圓效果了，接下來我們如何實現大頭和小頭的效果呢？

思路一：我們再把橢圓進行分割然後控制寬度不一致。（此種方法不成功）

思路二：我們設定border-radius的百分比。當border-radius: 100%;與前一種

方法的截圖如下：

再次嘗試將border-radius的百分比的值進行分離（不要簡寫，直接寫成4個），然後控制百分比不一致。關鍵**：

border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;

思考一：如果該div沒有寬高會怎樣？

實現結果：

思考二：前面的效果得到的是四個三角形，我們有沒有什麼辦法將三角形從那個div中分離出來呢？

思路：目前沒有接觸過有關div分離的（具體也應該不存在吧），但是我們來扣一扣css的定義「層疊樣式」，轉換我們的思維，我們有沒有什麼方法將我們不想要的三角形覆蓋掉？

具體做法：將我們需要的那邊的顏色設定為我們的背景色–白色，對的這樣就可以得到我們想要的效果。**如下（以想要上邊的三角形為例）：

border-color: yellow white white white;

是不是這樣就算完成我們的三角形效果了呢？

我們可以試試修改整個body的背景顏色為黑色，看有什麼變化：

發現該div仍佔據著那麼大的空間，並且背景顏色設定為白色並不是最科學

思考四：我們該如何將不想要的顏色設定為消失呢？

思路：我們將不想要表現出來的顏色設定為父級容器的背景色，border-color: yellow transparent transparent transparent;

結果如下：

思考三：我們如何將div設定不佔那麼大的空間呢？

思路：直接將想要的三角形的對邊的border的寬度去掉

具體做法：（這次以想要下面的三角形為例），**如下：

div結果如圖：

思考一：我們平時的三角形有銳角三角形，鈍角三角形，直角三角形，等邊三角形，等腰三角形等，我們有什麼辦法讓我們直接得到的就是我們想要的三角形效果不？

（這個可以有，比如說我們可以用兩個三角形和乙個長方形拼成平行四邊形，甚至說我們用多個div在一起拼成簡單的小木屋效果……）

補充：1、在我們思考一的前面那張圖，我們可以看到其實那中間的幾個分別是梯形，用同樣的方法，我們可以得到梯形的效果（具體做法不再另外介紹）。

2、通過旋轉，我們可以將我們的正方形變成菱形的效果

首先我們分析一下六邊形，看能不能把它分解成我們前面有說過的簡單的圖形，

分析：以上面的為例，我們可以看出六邊形由兩個三角形和乙個矩形構成。

思考一：我們有沒有什麼方法將這三個圖形拼在一起？

思路：用偽元素：after和:before，然後在各自的區域繪製圖形

分析：試著用前面的方法，我們分析六角星的結構，我們可以理解為乙個六角星是由兩個三角形一起重疊而成的，接下來就好辦了，我們直接看**：

五角星的製作（實際操作起來比六角星困難）：我們先自己畫乙個五角星，然後將其分割為三個，然後利用前面的步驟去實現，這裡我只是列出一種方法作為參考（其中有幾個細節的處理有點複雜），分析圖如下：

對話方塊的製作：

分析：對話方塊由乙個三角形和乙個圓角舉行組成

實現：**如下：

訊息提示框可以先製作乙個圓角矩形，然後在需要的地方放置乙個三角形。

CSS 關於css中的border

曾經一直以為html中的border是直角的，直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式，如果這個角相鄰的兩個border乙個有定義而乙個無定義，那麼繪製的結果就是由粗到細的 小尾巴了...

css中的border屬性。。。。。

1.border color 邊框的顏色 一般設定邊框都有3個屬性 寬度 線的樣式 顏色，如果寬度設定了很多px，那麼就可以給邊框設定很多顏色，讓邊框顯示出漸變的效果，不過設定邊框不同顏色時只能通過border bottom colors，border top colors，border left ...

css中的有趣的 border

css 中的 border 屬性，我想凡是了解一點 css 的都知道它是作用，可以在 mdn 上找到對它的詳細介紹。簡單來說，就是我們常用的邊框，乙個非常基礎的用法，就是 border 1px solid black 等價於 border width 1px border style solid b...