點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

你所不知道的border用法

來源：懂視網責編：小采時間：2020-11-27 15:34:42

你所不知道的border用法

你所不知道的border用法:前面的話：在看這篇文章之前你可能會覺得border只是簡單的繪制邊框，看了這篇文章，我相信你也會跟我一樣說一句我靠，原來css中的border還可以這樣玩。這篇文章主要是很早以前看了別人用純CSS繪制三角形后自己的一些思路的整理，文中會介紹幾種小圖標的效

推薦度：

點擊下載本文 文檔為doc格式

導讀你所不知道的border用法:前面的話：在看這篇文章之前你可能會覺得border只是簡單的繪制邊框，看了這篇文章，我相信你也會跟我一樣說一句我靠，原來css中的border還可以這樣玩。這篇文章主要是很早以前看了別人用純CSS繪制三角形后自己的一些思路的整理，文中會介紹幾種小圖標的效

前面的話：

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

用css中的border繪制雞蛋形狀：

是的你沒看錯，這里是要做繪制一個類似于雞蛋的效果。

思路：我們先用p繪制一個正方形，然后利用設置border-radius: 50%;，這樣我們就可以得到一個圓形的效果，代碼如下：

html代碼：

<p class="p"></p>
css代碼：

.p {
width: 100px;
height: 100px;
line-height: 100px;
background-color: aqua;
text-align: center;
border-radius: 50%;
}
結果如圖：

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

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

實現：我們分別改變width:50px;或height:50px;（只改變其中的一個），這時我們得到的效果分別為：

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

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

思路二：我們設置border-radius的百分比。當border-radius: 100%;與前一種方法的截圖如下：

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

border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
此時得到的效果截圖：

用css中的border畫三角形：

相信大家都知道border-color是控制邊框顏色的，但是你可能沒這樣試過，來看下面的代碼：

html：

<p class="p"></p>
css：

.p {
width: 100px;
height: 100px;
border: 50px solid transparent;
border-color: yellow green red aqua;
}
這樣的結果為：

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

實現結果：

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

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

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

border-color: yellow white white white;

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

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

發現該p仍占據著那么大的空間，并且背景顏色設置為白色并不是最科學

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

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

結果如下：

思考三：我們如何將p設置不占那么大的空間呢？

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

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

p{
width:0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
結果如圖：

關于三角形的擴展的一些思考：

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

思路：當底邊和水平線平行時，我們直接通過控制寬高比來實現我們想要的三角形效果；當與水平線不重合時這個時候就比較復雜了，就需要用到寬高比和CSS3中的transform屬性和rotate相結合，讓我們的三角形呈現出我們想要的效果（這里只是介紹思路，不去具體實現，其中有涉及到數學方面的知識可以自己百度）。

思考二：我們能不能用多個三角形在一起拼出更多的形狀？

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

補充：

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

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

多邊形的制作（以六邊形為例）

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

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

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

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

參考代碼如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>六邊形的制作</title>
<style type="text/css">
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 100px auto;
}

#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid yellow;
}

#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid aqua;
}
</style>
</head>

</html>
（當然這里知識介紹了一種情況，也可以嘗試三角形所在的邊不一樣）

多角星的制作（以六角星為例）

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>六角星</title>
<style type="text/css">

p {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #de34f7;
margin: 10px auto;
}

p:after {
content: "";
/*content插入內容*/
width: 0;
height: 0;
position: absolute;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid #de34f7;
margin: 60px 0 0 -100px;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
最終實現效果如圖：

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

參考代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#star{
width: 0px;
height: 0px;
margin: 50px 0;
color: red;
position: relative;
display: block;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
-webkit-transform: rotate(35deg);
}
#star:before{
content: '';
width: 0px;
height: 0px;
margin: 50px 0;
color: yellow;
position: relative;
display: block;
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
top: -45px;
left: -65px;
}
#star:after{
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);

}
</style>
</head>
<body>
<p id="star"></p>
</body>
</html>

CSS小圖標效果：

到這里，你是不是還沒看過癮呢？下面在來分享一下自己做的CSS小圖標：對話框的制作

對話框的制作：

分析：對話框由一個三角形和一個圓角舉行組成

實現：代碼如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

p {
margin: 100px;
}

#comment_bubble {
width: 300px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>

<body>
<p>消息提示框可以先制作一個圓角矩形，然后在需要的地方放置一個三角形。</p>
<p id="comment_bubble">

</p>
</body>
</html>
實現結果：