溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了css中怎么制作一個三角形，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
首先我們寫一個p:
.triangle{
height: 100px;
width: 100px;
border:100px solid ;
border-color: red orange blue purple;
}效果如下圖：
那么這個類名為p1的p就是一個寬高為100px的正方形，它的邊框為100px，上下左右的邊框為紅、藍、紫、橙。（是不是圖案很漂亮？）
那你會問這和三角形有什么關系？
來，我們進行下一步：把p的寬高設為0；
你會發現屏幕上有一個四色正方形，而這個正方形恰巧是由四個三角形的邊框組成的。
這時候只要取你想要的方向，把其他三角形設為透明就好了。
這里提示一下大家，屬性透明為（transparent）。
比如咱們要一個紅色、箭頭向上的三角形，代碼如下：
.triangle-red{
height: 0px;
width: 0px;
border:100px solid ;
border-color: transparent transparent red transparent;
}效果如下圖：
趕緊試試吧！我們還能做出左上、左下、右上、右下的三角形，例如左上：
.triangle-red{
height: 0px;
width: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}效果圖：
上述內容就是css中怎么制作一個三角形，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
