CSS用border绘制三角形_html/css_WEB-ITnose
程序员文章站
2022-05-23 10:47:04
...
使用border绘制三角形的思路,就是border值设置一个很大的值,这样每边就会显示为四分之一块的三角形。这样不借助图片,可以直接绘制出三角形了。
一个栗子:
效果:
如果设置了块的宽高,还是会呈现边线的效果,每个边线将会是一个等腰梯形,类似于相框:
效果:
利用这个原理,可以绘制不同形状的三角形,例如菜单上常用的右方向等腰直角三角形:
图:
再来一个:
图图:
就到这里了,加油!每天进步一点点。
推荐阅读
-
用CSS3绘制三角形的简单方法
-
CSS之border绘制三角形
-
谁用html5 canvas画过五角星啊_html/css_WEB-ITnose
-
WebForm 获取实体类的数据,填充页面(用session传值)_html/css_WEB-ITnose
-
用python正则如何去掉下面文本三个_html/css_WEB-ITnose
-
CSS3绘制圆角矩形的简单示例_html/css_WEB-ITnose
-
请问html页面中可以用矢量图码_html/css_WEB-ITnose
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
用html5实现涂擦效果?_html/css_WEB-ITnose
-
怎么用dreamweaver做一个可以换肤的界面_html/css_WEB-ITnose