資訊專欄INFORMATION COLUMN
摘要：代碼如下代碼代碼效果如下繪制此時(shí)，我們就可以根據(jù)上述的內(nèi)容畫(huà)出不同朝向的三角形了，例如當(dāng)我們需要一個(gè)朝上的三角形，就不需要設(shè)置上邊框，其他的以此類推。
引入
用 CSS 繪制三角形，只是對(duì) border 屬性的簡(jiǎn)單應(yīng)用。平時(shí)使用 border 屬性的時(shí)候多留意一下，就會(huì)發(fā)現(xiàn)其中的技巧。下面，我們先看以下代碼：
HTML代碼：
----------
CSS代碼：
.test{
width: 10px;
height: 10px;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid orange;
}
效果如下：
不難看出，當(dāng)盒子內(nèi)容的寬度和高度遠(yuǎn)小于邊框的時(shí)候，邊框的顯示為等腰梯形。由此我們可以推斷，當(dāng)我們將 div 的寬高都設(shè)為 0 的時(shí)候，代表盒子內(nèi)容的白色正方形會(huì)消失，于此同時(shí)，邊框顯示為等腰三角形。代碼如下：
HTML代碼：
----------
CSS代碼：
.test{
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid orange;
}
效果如下：
此時(shí)，我們就可以根據(jù)上述的內(nèi)容畫(huà)出不同朝向的三角形了，例如：當(dāng)我們需要一個(gè)朝上的三角形，就不需要設(shè)置上邊框，其他的以此類推。代碼如下：
HTML代碼：
----------
CSS代碼：
.test1{
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid transparent;
}
.test2{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid orange;
}
.test3{
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.test4{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid red;
border-bottom: 50px solid transparent;
效果如下：
在實(shí)現(xiàn)繪制的代碼中，我們會(huì)注意到，每個(gè)三角形都有兩個(gè)邊框的 border-color 屬性被設(shè)置成 transparent。至于為什么，我們可以改變?cè)搶傩灾祦?lái)嘗試一下，代碼如下：
HTML代碼：
CSS代碼：
.test{
width: 0;
height: 0;
border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid orange;
}
效果如下：
對(duì)比完全設(shè)置邊框和上面少設(shè)置一項(xiàng)邊框的效果圖，可以看出，橙色和紅色三角形各自缺少了上面的一半。由此可知，我們必須設(shè)置三個(gè)邊框的，且位于兩側(cè)的邊框的 border-color 屬性應(yīng)設(shè)置為 transparent。
總結(jié)寫(xiě)這篇總結(jié)也是看到最近有人提出該方面問(wèn)題，想起當(dāng)初自己做的嘗試，所以寫(xiě)出來(lái)水一篇文章。寫(xiě)的比較簡(jiǎn)陋，以后有機(jī)會(huì)再做充實(shí)，請(qǐng)多多指導(dǎo)。
關(guān)于使用CSS繪制簡(jiǎn)單圖形，推薦學(xué)習(xí)ICONO:純CSS圖標(biāo)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111073.html
摘要：在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來(lái)完成，不過(guò)坦白說(shuō)還有另外一種方法，可以將單一做更多形狀的變換，這種方法就是的，這個(gè)看起來(lái)有點(diǎn)眼熟，因?yàn)樗揪痛嬖谟诶镱^，利用掩碼剪裁的方法，連接坐標(biāo)繪制掩碼區(qū)域，就可以做出許多不同的 在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來(lái)完成，不過(guò)坦白說(shuō)還有另外一種方法，可以將單一div做更多形狀的變換，這種方法就是CSS3的clip...
摘要：基本原理在中，我們可以利用四個(gè)屬性來(lái)繪制三角形。繪制三角形等邊三角形等邊三角形又稱正三邊形，為三邊相等的三角形，其三個(gè)內(nèi)角相等，均為，它是銳角三角形的一種。 簡(jiǎn)言 本文簡(jiǎn)要闡述了用CSS邊框的方法在頁(yè)面上繪制三角形，包括幾種典型的三角形繪制，還介紹了幾個(gè)簡(jiǎn)單的應(yīng)用場(chǎng)景。利用邊框繪制三角形方法只是眾多方案中的一種，大家根據(jù)項(xiàng)目實(shí)際，選用最適宜項(xiàng)目的方案。 showImg(https://...
摘要：用批量生成刻度線因?yàn)榭潭染€有很多條，為了減少代碼量，我們用來(lái)批量創(chuàng)建刻度線。同時(shí)修改屬性和函數(shù)，讓它們引用這個(gè)變量的值。繪制指針指針是由個(gè)三角形組成的，對(duì)于這種成對(duì)的元素，通常都用偽元素繪制。最后，加一點(diǎn)動(dòng)畫(huà)效果，讓指針像指南針那樣轉(zhuǎn)動(dòng)。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按...
摘要：用批量生成刻度線因?yàn)榭潭染€有很多條，為了減少代碼量，我們用來(lái)批量創(chuàng)建刻度線。同時(shí)修改屬性和函數(shù)，讓它們引用這個(gè)變量的值。繪制指針指針是由個(gè)三角形組成的，對(duì)于這種成對(duì)的元素，通常都用偽元素繪制。最后，加一點(diǎn)動(dòng)畫(huà)效果，讓指針像指南針那樣轉(zhuǎn)動(dòng)。 showImg(https://segmentfault.com/img/bVbsTZD?w=400&h=399); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按...
閱讀 3070·2021-10-27 14:16
閱讀 2882·2021-09-24 10:33
閱讀 2291·2021-09-23 11:21
閱讀 3234·2021-09-22 15:14
閱讀 818·2019-08-30 15:55
閱讀 1681·2019-08-30 15:53
閱讀 1749·2019-08-29 11:14
閱讀 2194·2019-08-28 18:11
