css中怎么制作一個三角形

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

目前創新互聯建站已為上1000家的企業提供了網站建設、域名、虛擬主機、網站托管運營、企業網站設計、岳陽樓網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

制作方法

首先我們寫一個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中怎么制作一個三角形，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

當前名稱：css中怎么制作一個三角形
URL標題：http://m.kartarina.com/article6/jecdig.html

成都網站建設公司_創新互聯，為您提供搜索引擎優化、商城網站、定制開發、微信公眾號、域名注冊、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯