热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

用CSS3绘制三角形的简单方法

2023-02-12 17:48:50

这篇文章主要介绍了用CSS3绘制三角形的简单方法,是CSS前端绘图的基础,需要的朋友可以参考下

    利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。

CSS Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.        
  5.     "triangle-up">
  
  •   
  •   

    •     图解

        正常的框模型，div的内容width以及height均为50px.黑线划出来的区域就是它的右边框，呈现为一个梯形

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.        
    5.     "triangle-up">
      
  •   
  •   

    •     当div的内容width以及height均为0.黑线划出来的区域就是它的右边框，呈现为一个三角形

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.        
    5.     "triangle-up">
      
  •   
  •   

    •     当div的内容width以及height均为0.上下左边框都为透明的时候，只有右边框显示为红色，三角形就看到了

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.        
    5.     "triangle-up">
      
  •   
  •   

    • 结合css其他特性定能做出更有趣的一些效果！

    以上就是用CSS3绘制三角形的简单方法的详细内容，更多请关注易知道|edz.cc其它相关文章！

    三角形方法绘制元素属性值

    推荐阅读