热搜:NVER node 开发 php

CSS用border绘制三角形_html/css_WEB-ITnose

2024-11-16 10:00:01
CSS用border绘制三角形_html/css_WEB-ITnose

  使用border绘制三角形的思路,就是border值设置一个很大的值,这样每边就会显示为四分之一块的三角形。这样不借助图片,可以直接绘制出三角形了。

  一个栗子:

效果:

如果设置了块的宽高,还是会呈现边线的效果,每个边线将会是一个等腰梯形,类似于相框:

效果:

利用这个原理,可以绘制不同形状的三角形,例如菜单上常用的右方向等腰直角三角形:

图:

再来一个:

图图:

就到这里了,加油!每天进步一点点。