CSS用border繪製三角形
阿新 • • 發佈：2019-02-18
使用border繪製三角形的思路，就是border尺寸設定一個較大的值，元素自身的寬高設定為0，全部由邊線佔據，這樣每邊就會顯示為四分之一塊的三角形。這樣不借助圖片，可以直接繪製出三角形了。
一個栗子：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #triangle{ height:0; width:0; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow; } </style> </head> <body> <div id="triangle"></div> </body> </html>
效果：
如果設定了塊的寬高，還是會呈現邊線的效果，每個邊線將會是一個等腰梯形，類似於相框：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #triangle{ height:100px; width:100px; border-top:solid 100px yellow; border-left:solid 100px purple; border-right:solid 100px purple; border-bottom:solid 100px yellow; } </style> </head> <body> <div id="triangle"></div> </body> </html>
效果：
利用這個原理，可以繪製不同形狀的三角形，例如選單上常用的右方向等腰直角三角形：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #triangle{ height:0; width:0; border-top:solid 100px rgba(0,0,0,0); border-left:solid 100px purple; border-bottom:solid 100px rgba(0,0,0,0); } </style> </head> <body> <div id="triangle"></div> </body> </html>
another one:
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #triangle{ height:0; width:0; border-right:solid 100px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 100px rgba(0,0,0,0); } </style> </head> <body> <div id="triangle"></div> </body> </html>
圖：
再來一個：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #triangle{ height:0; width:0; border-right:solid 50px rgba(0,0,0,0); border-bottom:solid 100px yellow; border-left:solid 50px rgba(0,0,0,0); } </style> </head> <body> <div id="triangle"></div> </body> </html>
圖圖：
也可以使用css繪製三角形邊線：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>border</title> <style> .border{ position:relative; } .border:after,.border:before{ content:''; display:block; position:absolute; border-style:solid; border-width:20px; } .border:before{ border-color:transparent transparent #333 transparent; left:20px; top:42px; } .border:after{ border-color:transparent transparent #fff transparent; left:20px; top:45px } </style> </head> <body> <div class="border"></div> </body> </html>