怎么用css寫出三角形？

我們的思路是使用border邊框來實現(xiàn)三角形的樣式，因為border的邊框是由四個三角形組成的。

從事成都二樞服務(wù)器租用托管，服務(wù)器租用，云主機(jī)，網(wǎng)站空間，域名申請，CDN，網(wǎng)絡(luò)代維等服務(wù)。

請點擊輸入圖片描述

首先我們創(chuàng)建一個帶邊框的div：

具體代碼實現(xiàn)如下：

width: 40px;

height: 40px;

border-width: 40px;

border-style: solid;

border-color: red green blue brown;

請點擊輸入圖片描述

然后我們將內(nèi)部DIV的寬高設(shè)置為0：

width: 20px;

height: 20px;

border-width: 10px;

border-style: solid;

border-color: red green blue brown;

請點擊輸入圖片描述

將其他的三個邊框給取消點：

width: 0;

height: 0;

border-width: 40px;

border-style: solid;

border-color: red transparent transparent transparent;

請點擊輸入圖片描述

利用更改border的邊框，我們可以隨意控制寫出我們想要的三角形，通過控制邊框的大小來實現(xiàn)三角形的大小，通過控制邊框的位置來改變?nèi)切蔚奈恢谩?/p>

請點擊輸入圖片描述

6

使用上面的方式實現(xiàn)三角形有一個問題就是，三角形的方位不太好控制，但是使用其他的方式依然會面臨這樣的問題。

請點擊輸入圖片描述

實現(xiàn)css中三角形寫法

1、理論

三角形實現(xiàn)原理：寬度width為0；height為0；

（1）有一條橫豎邊（上下左右）的設(shè)置為border-方向：長度 solid red，這個畫的就是底部的直線。其他邊使用border-方向：長度 solid transparent。

（2）有兩個橫豎邊（上下左右）的設(shè)置，若斜邊是在三角形的右邊，這時候設(shè)置top或bottom的直線，和右邊的斜線。若斜邊是在三角形的左邊，這時候設(shè)置top或bottom的直線，和左邊的斜線。

二、實現(xiàn)

2.1 Triangle Up

#triangle-up {width:0;? ? height:0;? ??

border-left:50px solid transparent;? ??

border-right:50px solid transparent;? ??

border-bottom:100px solid red;}

2.2 Triangle Down

#triangle-down {width:0;? ? height:0;??

border-left:50px solid transparent;? ??

border-right:50px solid transparent;? ??

border-top:100px solid red;}

2.3 Triangle Left

#triangle-left {

width:0;??

height:0;??

border-top:50px solid transparent;??

border-right:100px solid red;? ?

border-bottom:50px solid transparent;}

2.4 Triangle Right

#triangle-right {width:0;? ??

height:0;? ??

border-top:50px solid transparent;? ?

border-left:100px solid red;? ??

border-bottom:50px solid transparent;}

2.5 Triangle Top Left

#triangle-topleft {width:0;??

height:0;? ??

border-top:100px solid red;? ?

border-right:100px solid transparent;}

2.6?Triangle Top Right

#triangle-topright {width:0;? ?

height:0;??

border-top:100px solid red;? ??

border-left:100px solid transparent; }

2.7 Triangle Bottom Left

#triangle-bottomleft {width:0;? ?

height:0;? ??

border-bottom:100px solid red;? ?

border-right:100px solid transparent;}

2.8 Triangle Bottom Right

#triangle-bottomright {width:0;? ??

height:0;? ?

border-bottom:100px solid red;? ??

border-left:100px solid transparent;}

CSS實現(xiàn)三角形

通過設(shè)置 寬和高為0 ，改變 border-color 屬性即可實現(xiàn)三角形效果。

在當(dāng)前的三角形后面添加一個一個實心三角形，然后將這個三角形絕對定位到當(dāng)前三角行的位置切割。

名稱欄目：css樣式三角形,css3三角形樣式
URL標(biāo)題：http://chinadenli.net/article21/dsggijd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、移動網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)站設(shè)計、全網(wǎng)營銷推廣

廣告

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