CSS用border绘制三角形_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:51:541258검색
使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。
一个栗子：
<!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>
<!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> 图图：
就到这里了，加油！每天进步一点点。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.