利用css繪制三角形的方法及拓展
我要評論以下是常用的三角形形狀
其實都是html+css就能實現(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;
}
第二種方法
以上代碼便是實現(xiàn)上下左右方向三角形的代碼；然而其實不難發(fā)現(xiàn)，其實它們之間有個共同點，都是由border中的top、right、bottom、left實現(xiàn)的，因此我們還有一種寫法，通過實現(xiàn)設(shè)置一個div的border，讓其隱藏掉，再給其中一個方向顏色，該方向的三角形就能顯現(xiàn)出來，比如實現(xiàn)向上方向的三角形的css代碼：
.top_triangle{
width:0;
height:0;
//將其先隱藏掉，再顯示。
border:30px solid transparent;
border-bottom:30px solid green;
}
其它方向的就相類似，就不一一舉例了。
一點tips
如果認(rèn)真嘗試敲過這個代碼的讀者或許會發(fā)現(xiàn)，以第一種方法的例子比方，都給border設(shè)置了三個方向的值，好奇的人會想，只設(shè)置兩個行或者一個行嗎？敲敲就知道啦~
實踐中告訴我，設(shè)置一個或者兩個但設(shè)置相反方向上的border值的都不會顯示出來，可以試試；但是如果兩個中，不同方向上的兩個值是會顯示出來的，至于是什么形狀，就看你選的方向了。實踐出真知！
實現(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（我理解隱藏掉），就不難理解，其實也就是將一個盒模型中的padding+content，用width+height都設(shè)置為零干掉，然后給讓border隆重登場，設(shè)置相應(yīng)的值，當(dāng)然這些值都是必須的，然后呢，將要顯現(xiàn)出來的顯示，該隱藏的就隱藏，第一種方法中干脆就省略了一個（也只能是一個），至于大小顏色位置就隨你設(shè)置了 。
延伸
css3中的border-radius，有個圖案如下
應(yīng)用蠻多的
其實這個的實現(xiàn)用border也行。代碼如下：
.eatFace{
width:0;
height:0;
border:30px solid red;
border-radius:50%;
border-right:30px solid transparent;
}</p> <p>
至于原理，如果大家讀懂了三角形的，這個不難理解。
總結(jié)
以上就是利用css繪制三角形的方法及拓展的全部內(nèi)容了，希望本文的內(nèi)容能對大家學(xué)習(xí)或者使用css有所幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了CSS繪制三角形的實現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-11- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 這篇文章主要為大家詳細(xì)介紹了Html+CSS繪制三角形圖標(biāo)的相關(guān)代碼，很多網(wǎng)頁都有三角形的圖標(biāo)，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考2016-06-17
- 這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡單，如何繪制透明的三角形，本文為大家解決這個問題，感興趣的小伙伴們可以參考一下2016-03-10
- 這篇文章主要介紹了用CSS3繪制三角形的簡單方法,是CSS前端繪圖的基礎(chǔ),需要的朋友可以參考下2015-07-17
- 最近我想修改一下這個網(wǎng)站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭?？墒?，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準(zhǔn)2014-05-07
- 用CSS也可以畫畫了.不錯哦.下面我們來畫一個三角形看看2012-06-04
這篇文章主要介紹了CSS中三角形的繪制與巧妙應(yīng)用，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-11
