本篇文章為大家展示了css中怎么制作一個(gè)三角形，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

目前創(chuàng)新互聯(lián)建站已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、岳陽樓網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

制作方法

首先我們寫一個(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)、紫、橙。（是不是圖案很漂亮？）
那你會(huì)問這和三角形有什么關(guān)系？
來，我們進(jìn)行下一步：把p的寬高設(shè)為0；
你會(huì)發(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é)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：css中怎么制作一個(gè)三角形
URL標(biāo)題：http://www.ekvhdxd.cn/article6/jecdig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、商城網(wǎng)站、定制開發(fā)、微信公眾號(hào)、域名注冊(cè)、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)