css 三角形实现方式及快速联想记忆

2023-12-23 06:07:00

css实现三角形是常见的需求,在此记录如下

1 边框实现

原理:相邻的border之间会形成一条斜线(可按此联想记忆)

 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid red;
            border-right: 100px solid green;
            border-top: 100px solid blue;
            border-bottom: 100px solid orange;
        }

注意:相邻的border形成的斜线,斜线一定是相邻产生

1?

 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid orange;
        }

  • 下侧橙色,说明下侧有border,颜色为橙色
  • 左侧斜线,右侧斜线,说明左右border有设置,没有颜色说明颜色是transparent

2

 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid orange;
        }

  • 上侧橙色,说明上侧有border,颜色为橙色
  • 左侧斜线,右侧斜线,说明左右border有设置,没有颜色说明颜色是transparent

3

 .triangle {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-left: 100px solid orange;
        }
 .triangle {
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 100px solid orange;
        }

两种理解:橙色是左下,斜线在橙色的右上,因为要两两相邻,只能下如下两种搭配

  • 左侧橙色,说明左侧有border,颜色为橙色
  • 上侧斜线,说明上侧border有设置,没有颜色说明颜色是transparent

或者

  • 下侧橙色,说明下侧有border,颜色为橙色
  • 右侧斜线,说明右侧border有设置,没有颜色说明颜色是transparent

4

 .triangle {
            width: 0;
            height: 0;
            border-bottom: 100px solid transparent;
            border-left: 100px solid orange;
        }
 .triangle {
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-top: 100px solid orange;
        }

两种理解:橙色是左上,斜线在橙色的右下,因为要两两相邻,只能下如下两种搭配

  • 左侧橙色,说明左侧有border,颜色为橙色
  • 下侧斜线,说明下侧border有设置,没有颜色说明颜色是transparent

或者

  • 上侧橙色,说明上侧有border,颜色为橙色
  • 右侧斜线,说明右侧border有设置,没有颜色说明颜色是transparent

5

 .triangle {
            width: 0;
            height: 0;
            border-bottom: 100px solid transparent;
            border-right: 100px solid orange;
        }
 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-top: 100px solid orange;
        }

两种理解:橙色是右上,斜线在橙色的左下,因为要两两相邻,只能下如下两种搭配

  • 右侧橙色,说明右侧有border,颜色为橙色
  • 下侧斜线,说明下侧border有设置,没有颜色说明颜色是transparent

或者

  • 上侧橙色,说明上侧有border,颜色为橙色
  • 左侧斜线,说明左侧border有设置,没有颜色说明颜色是transparent

6

 .triangle {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 100px solid orange;
        }
 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-bottom: 100px solid orange;
        }

两种理解:橙色是右下,斜线在橙色的左上,因为要两两相邻,只能下如下两种搭配

  • 右侧橙色,说明右侧有border,颜色为橙色
  • 上侧斜线,说明上侧border有设置,没有颜色说明颜色是transparent

或者

  • 下侧橙色,说明下侧有border,颜色为橙色
  • 左侧斜线,说明左侧border有设置,没有颜色说明颜色是transparent

2 线性渐变实现

原理:通过控制linear-gradient线性渐变角度和渐变距离(其实不是渐变,是拼色),使得从矩形一个角开始形成三角形

 .triangle {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, red, red 50%, orange 50%, orange);
        }

当把第二种颜色设置为透明时:

 .triangle {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, red, red 50%, transparent 50%, transparent);
        }

3 裁减路径实现

原理:通过clip-path,传递多边形路径坐标形成三角形

 .triangle {
            width: 100px;
            height: 100px;
            background: orange;
            clip-path: polygon(0 0,100% 0, 100% 100%);

文章来源:https://blog.csdn.net/weixin_56624286/article/details/135163426
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。