怎么用css寫出三角形？

我們的思路是使用border邊框來(lái)實(shí)現(xiàn)三角形的樣式，因?yàn)閎order的邊框是由四個(gè)三角形組成的。

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

請(qǐng)點(diǎn)擊輸入圖片描述

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

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

width: 40px;

height: 40px;

border-width: 40px;

border-style: solid;

border-color: red green blue brown;

請(qǐng)點(diǎn)擊輸入圖片描述

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

width: 20px;

height: 20px;

border-width: 10px;

border-style: solid;

border-color: red green blue brown;

請(qǐng)點(diǎn)擊輸入圖片描述

將其他的三個(gè)邊框給取消點(diǎn)：

width: 0;

height: 0;

border-width: 40px;

border-style: solid;

border-color: red transparent transparent transparent;

請(qǐng)點(diǎn)擊輸入圖片描述

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

請(qǐng)點(diǎn)擊輸入圖片描述

6

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

請(qǐng)點(diǎn)擊輸入圖片描述

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

1、理論

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

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

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

二、實(shí)現(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實(shí)現(xiàn)三角形

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

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