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