CSS用border绘制三角形_html/css
来源：动视网
责编：小采
时间：2020-11-27 16:00:12
CSS用border绘制三角形_html/css
CSS用border绘制三角形_html/css_WEB-ITnose:使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。 一个栗子： #triangle{ height:0; width:0; border-top:solid 100px yellow; bo
导读CSS用border绘制三角形_html/css_WEB-ITnose:使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。 一个栗子： #triangle{ height:0; width:0; border-top:solid 100px yellow; bo
使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。
一个栗子：
效果：
如果设置了块的宽高，还是会呈现边线的效果，每个边线将会是一个等腰梯形，类似于相框：
效果：
利用这个原理，可以绘制不同形状的三角形，例如菜单上常用的右方向等腰直角三角形：
图：
再来一个：
图图：
就到这里了，加油！每天进步一点点。
CSS用border绘制三角形_html/css
CSS用border绘制三角形_html/css_WEB-ITnose:使用border绘制三角形的思路，就是border值设置一个很大的值，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。 一个栗子： #triangle{ height:0; width:0; border-top:solid 100px yellow; bo
