如何利用css繪制三角形

這篇文章給大家分享的是有關(guān)如何利用css繪制三角形的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

以下是常用的三角形形狀

其實(shí)都是html+css就能實(shí)現(xiàn)，很簡單

代碼如下：

第一種方法

html代碼：

代碼如下:

<!-- 向上 -->
<div class="top_triangle"></div>
<!-- 向下 -->
<div class="bottom_triangle"></div>
<!-- 向左 -->
<div class="left_triangle"></div>
<!-- 向右 -->
<div class="right_triangle"></div>

css代碼

代碼如下:

/*向上*/
       .top_triangle{
           width:0;
           height:0;
           border-bottom:30px solid green;
           border-right:30px solid transparent;
           border-left:30px solid transparent;
       }
       /*向下*/
       .bottom_triangle{
           width:0;
           height:0;
           border-top:30px solid black;
           border-right:30px solid transparent;
           border-left:30px solid transparent;
       }
       /*向右*/
       .left_triangle{
           width:0;
           height:0;
           border-top:30px solid transparent;
           border-left:30px solid yellow;
           border-bottom:30px solid transparent;
       }
       /*向左*/
       .right_triangle{
           width:0;
           height:0;
           border-top:30px solid transparent;
           border-right:30px solid red;
           border-bottom:30px solid transparent;
       }

第二種方法

以上代碼便是實(shí)現(xiàn)上下左右方向三角形的代碼；然而其實(shí)不難發(fā)現(xiàn)，其實(shí)它們之間有個(gè)共同點(diǎn)，都是由border中的top、right、bottom、left實(shí)現(xiàn)的，因此我們還有一種寫法，通過實(shí)現(xiàn)設(shè)置一個(gè)div的border，讓其隱藏掉，再給其中一個(gè)方向顏色，該方向的三角形就能顯現(xiàn)出來，比如實(shí)現(xiàn)向上方向的三角形的css代碼：

代碼如下:

.top_triangle{
           width:0;
           height:0;
           //將其先隱藏掉，再顯示。
           border:30px solid transparent;
           border-bottom:30px solid green;
       }

其它方向的就相類似，就不一一舉例了。

一點(diǎn)tips
如果認(rèn)真嘗試敲過這個(gè)代碼的讀者或許會(huì)發(fā)現(xiàn)，以第一種方法的例子比方，都給border設(shè)置了三個(gè)方向的值，好奇的人會(huì)想，只設(shè)置兩個(gè)行或者一個(gè)行嗎？敲敲就知道啦~

實(shí)踐中告訴我，設(shè)置一個(gè)或者兩個(gè)但設(shè)置相反方向上的border值的都不會(huì)顯示出來，可以試試；但是如果兩個(gè)中，不同方向上的兩個(gè)值是會(huì)顯示出來的，至于是什么形狀，就看你選的方向了。實(shí)踐出真知！

實(shí)現(xiàn)的基本理解（方便記）
圖片中最左方的正方形css代碼如下：

代碼如下:

.all_triangle{
           width:0;
           height:0;
           border-top:30px solid black;
           border-left:30px solid yellow;
           border-right:30px solid red;
           border-bottom:30px solid green;
       }

加上在代碼中出現(xiàn)最多的transparent（我理解隱藏掉），就不難理解，其實(shí)也就是將一個(gè)盒模型中的padding+content，用width+height都設(shè)置為零干掉，然后給讓border隆重登場(chǎng)，設(shè)置相應(yīng)的值，當(dāng)然這些值都是必須的，然后呢，將要顯現(xiàn)出來的顯示，該隱藏的就隱藏，第一種方法中干脆就省略了一個(gè)（也只能是一個(gè)），至于大小顏色位置就隨你設(shè)置了 。

延伸
css3中的border-radius，有個(gè)圖案如下

應(yīng)用蠻多的

其實(shí)這個(gè)的實(shí)現(xiàn)用border也行。代碼如下：

代碼如下:

.eatFace{
           width:0;
           height:0;
           border:30px solid red;
           border-radius:50%;
           border-right:30px solid transparent;
       }</p> <p>

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

感謝各位的閱讀！關(guān)于“如何利用css繪制三角形”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！