您现在的位置是：网站首页> 编程资料编程资料

用CSS3绘制三角形的简单方法纯CSS3+DIV实现小三角形边框效果的示例代码详解css如何利用 :before :after 写小三角形CSS3 画基本图形，圆形、椭圆形、三角形等布局和排版教程 纯css3实现图片三角形排列使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)CSS3实现三角形不断放大效果

2021-09-05 986人已围观

简介 这篇文章主要介绍了用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">
      
  •   
  •   

    • 2015717191517568.png (600×590)

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

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

    • 2015717191550621.png (600×593)

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

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

    • 2015717191614499.jpg (600×593)

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

    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：简介CSS中的各种选择符CSS中的属性选择符和结构化伪类详解CSS中的类和ID选择符CSS中的选择符实际使用指南几个特殊的CSS选择符使用介绍css选择符类型详细介绍CSS 选择符的用法和实例详解如何编写高效的 CSS 选择符

    下一篇：举例详解CSS的z-index属性的使用css3的transform造成z-index无效解决方案css z-index层重叠顺序使用介绍CSS教程 彻底掌握Z-index属性

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网