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

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

分类:CSS_CSS3 答疑 - 常见问题 · 发布时间:2021-11-26 04:49 · 阅读:7241

这篇文章主要介绍了用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 (600×590)

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

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.        
    5.     "triangle-up">
      
  •   
  •   
  • 2015717191550621.png-600 (600×593)

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

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.        
    5.     "triangle-up">
      
  •   
  •   
  • 2015717191614499.jpg-600 (600×593)

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

    标签:
    CSS3 三角形

    相关文章

    css3媒体查询中device-width和width的区别详解

    这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    CSS3媒体查询实现不同宽度的下不同内容的展示功能

    这篇文章主要介绍了CSS3媒体查询实现不同宽度的下不同内容的展示功能,本章节我们将为大家演示一些多媒体查询实例,需要的朋友可以参考下

    CSS3几种实现子容器水平垂直居中的方法

    本文有几种方法可以实现容器与子容器水平垂直居中,主要包括Flexbox布局,position绝对定位+transform,表格布局,具有一定的参考价值,感兴趣的可以了解一下

    css3实现文字首尾衔接跑马灯的示例代码

    这篇文章主要介绍了css3实现文字首尾衔接跑马灯的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    CSS的浮动及清除浮动的5种方法介绍

    这篇文章主要为大家介绍了CSS的浮动及清除浮动的5种方法介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

    返回分类 返回首页