• CSS 制作三角形原理剖析


    使用css制作三角形其实原理很简单,下面一步步解析。

    1、html代码如下

    1 <div class="triangle">
    2 </div>
    
    

     2、CSS代码

    1 .triangle{
    2     
    3     width: 200px;
    4     height: 200px;
    5     border: solid 40px red;
    6 }

     不错,这里显示是一个正方形,如下

    3、下面改变个边框颜色

    1 .triangle{
    2     
    3     width: 200px;
    4     height: 200px;
    5     border-bottom: solid 40px #0000FF;
    6     border-top: solid 40px #000000;
    7     border-right: solid 40px #FF0000;
    8     border-left: solid 40px #00FF00;
    9 }

    显示效果如下

    这里可能会感觉很奇怪,为什么四个角上的变成了斜的,下面在做一下变换

    4、稍作变化,去掉上边框

    1 .triangle{
    2     
    3     width: 200px;
    4     height: 200px;
    5     border-bottom: solid 40px #0000FF; 
    6     border-right: solid 40px #FF0000;
    7     border-left: solid 40px #00FF00;
    8 }

    显示效果如下

    可以看出,浏览器渲染时,针对边框角处理,以left和top为例说明:如果top 和left同时存在,各显示一部分;如果只有left,left边框才会显示为矩形角。

    5、现在缩小div宽度和高度

    1 .triangle{
    2     
    3     width: 150px;
    4     height: 90px;
    5     border-bottom: solid 40px #0000FF;
    6     border-top: solid 40px #000000;
    7     border-right: solid 40px #FF0000;
    8     border-left: solid 40px #00FF00;
    9 }

    显示效果如下

    可以理解,当宽度和高度同时变为0时,就是如下效果

    1 .triangle{
    2     
    3     width: 0;
    4     height: 0;
    5     border-bottom: solid 40px #0000FF;
    6     border-top: solid 40px #000000;
    7     border-right: solid 40px #FF0000;
    8     border-left: solid 40px #00FF00;
    9 }

    6、这时候如果只留一个边框有颜色,其他边框变成透明的话,就成了三角形了

     1 .triangle{
     2     
     3     width: 0;
     4     height: 0;
     5     border-bottom: solid 40px transparent;
     6     border-top: solid 40px #000000;/*只留上边框有颜色,其他边框透明*/
     7     border-right: solid 40px transparent;
     8     border-left: solid 40px transparent;
     9 }
    10     

  • 相关阅读:
    Java IO 之 RandomAccessFile 操作文件内容
    Java IO 之 FileFilter与FilenameFilter
    Java IO 之 File 的创建、重命名与遍历
    Java IO 之 System类
    JVM内存区域配置
    切换 显示与隐藏页面元素
    thead tfoot tbody标签的使用
    使用锚点在HTML页面中快速移动
    ASP.NET Core 项目归档
    检测到有潜在危险的 Request.Form 值 转
  • 原文地址:https://www.cnblogs.com/zengguoyu/p/5363813.html
Copyright © 2020-2023  润新知