如何用CSS寫一個(gè)三角形

1.可以用css3的border-radius屬性來實(shí)現(xiàn)，支持ie9+

創(chuàng)新互聯(lián)專注于寶安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供寶安營銷型網(wǎng)站建設(shè)，寶安網(wǎng)站制作、寶安網(wǎng)頁設(shè)計(jì)、寶安網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造寶安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寶安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

div?class="dm"

/div

div?class="dm1"

/div

div?class="dm2"

/div

div?class="dm3"

/div

div?class="dm4"

/div

div?class="dm5"

/div

div?class="dm6"

/div

div?class="dm7"

/div

style

.dm?{

width:?0;

height:?0;

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

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

border-bottom:?100px?solid?#00897B;

}

.dm1{

??width:?0;

height:?0;

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

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

border-top:?100px?solid?#00897B;margin-top:?20px;

}

.dm2{

width:?0;

height:?0;

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

border-right:?100px?solid?#00897B;

border-bottom:?50px?solid?transparent;margin-top:?20px;

}

.dm3{

??width:?0;

height:?0;

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

border-left:?100px?solid?#00897B;

border-bottom:?50px?solid?transparent;margin-top:?20px;

}

.dm4{

???width:?0;

height:?0;

border-top:?100px?solid?#00897B;

border-right:?100px?solid?transparent;margin-top:?20px;

}

.dm5{

?width:?0;

height:?0;

border-top:?100px?solid?#00897B;

border-left:?100px?solid?transparent;?margin-top:?20px;

}

.dm6{

??width:?0;

height:?0;

border-bottom:?100px?solid?#00897B;

border-right:?100px?solid?transparent

}

.dm7{

??width:?0;

height:?0;

border-bottom:?100px?solid?#00897B;

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

}

/style

怎么用css寫出三角形？

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

請(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的邊框，我們可以隨意控制寫出我們想要的三角形，通過控制邊框的大小來實(shí)現(xiàn)三角形的大小，通過控制邊框的位置來改變?nèi)切蔚奈恢谩?/p>

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

6

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

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

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

1、理論

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

（1）有一條橫豎邊（上下左右）的設(shè)置為border-方向：長度 solid red，這個(gè)畫的就是底部的直線。其他邊使用border-方向：長度 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怎樣寫出三角形

style type="text/css"

#bottom{

width:0px;

height:0px;

border-left:30px solid #FFFFFF;

border-top:30px #FF6699 solid;

border-right:30px solid #FFFFFF;

}

#top{

width:0px;

height:0px;

border-left:30px solid #FFFFFF;

border-bottom:30px #FF6699 solid;

border-right:30px solid #FFFFFF;

}

#rt{

width:0px;

height:0px;

border-left:30px solid #FFffff;

border-bottom:30px #ff6699 solid;

}

#lt{

width:0px;

height:0px;

border-right:30px #FFffff solid;

border-bottom:30px solid #FF0000;

}

/style

下

div id="bottom"/div

上

div id="top"/div

右下

div id="rt"/div

左下

div id="lt"/div

CSS實(shí)現(xiàn)三角形

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

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

用css創(chuàng)建一個(gè)三角形

.div1 { border: transparent solid 100px; border-top-width: 0px; border-bottom: red solid 173px; width: 0; } /*三角向上*/

.div2 { border: transparent solid 100px; border-bottom-width: 0px; border-top: blue solid 173px; width: 0; }/*三角向下*/

.div3 { border: transparent solid 100px; border-left-width: 0px; border-right: red solid 173px; width: 0; } /*三角向左*/

.div4 { border: transparent solid 100px; border-right-width: 0px; border-left: blue solid 173px; width: 0; }/*三角向右*/