溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用CSS實現(xiàn)三角形，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
相信大家在瀏覽網站的時候，經?？吹礁鞣N下拉菜單，上面會有一個小小的三角形，實現(xiàn)這種三角形一般會想到是用圖片或者iconfont實現(xiàn)，然而其實這種三角形除了用圖片和iconfont， 用css也可以實現(xiàn)。制作三角形的做法，主要是利用邊框做成的，觀察以下代碼：
（可以專注紅色部分代碼）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邊框制作三角形</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box{width: 50px; height: 50px; margin:100px auto;}
.box{
border-top:100px solid red;
border-right:100px solid lime;
border-bottom:100px solid blue;
border-left:100px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
一個寬高為50px*50px的盒子，分別加了上下左右四個100px不同顏色的邊框，效果如圖所示:
CSS實現(xiàn)三角形制作方法
那個可以想象，如果把盒子寬高都設置成0，則會顯示4個不同顏色的三角形，代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邊框制作三角形</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box{width:0; height:0; margin:100px auto;}
.box{
border-top:100px solid red;
border-right:100px solid lime;
border-bottom:100px solid blue;
border-left:100px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果如下:
CSS實現(xiàn)三角形制作方法
如果想要得到單個三角形，必須把其他三角形隱藏掉，所以現(xiàn)在先來了解一下transparent這個屬性值。
說明：
RGBA(R,G,B,A)
取值：
R：
紅色值。正整數 | 百分數
G：
綠色值。正整數 | 百分數
B：
藍色值。正整數 | 百分數
A：
Alpha透明度。取值0~1之間。
說明：
用來指定全透明色彩。
transparent是全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值。
在CSS1中，transparent被用來作為background-color的一個參數值，用于表示背景透明。
在CSS2中，border-color也開始接受transparent作為參數值。
在CSS3中，transparent被延伸到任何一個有color值的屬性上。
有了transparent這個屬性值，我們可以通過它把不必要是邊框隱藏掉，就可以實現(xiàn)我們想要的三角形啦，代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邊框制作三角形</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box{width:0; height:0; margin:100px auto;}
.box{
border-top:100px solid red;
border-right:100px solid transparent;/*透明顏色的邊框*/
border-bottom:100px solid transparent;/*透明顏色的邊框*/
border-left:100px solid transparent;/*透明顏色的邊框*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
關于“如何使用CSS實現(xiàn)三角形”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
