在看這篇文章之前你可能會覺得border只是簡單的繪製邊框,看了這篇文章,我相信你也會跟我一樣說一句「我靠,原來css中的border還可以這樣玩」。這篇文章主要是很早以前看了別人用純css繪製三角形後自己的一些思路的整理,文中會介紹幾種小圖示的效果。
是的你沒看錯,這裡是要做繪製乙個類似於雞蛋的效果。
思路:我們先用div繪製乙個正方形,然後利用設定border-radius: 50%;,這樣我們就可以得到乙個圓形的效果,**如下:
html**:
css**:
.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 關於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...