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

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

1 边框实现

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

css 复制代码
 .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

css 复制代码
 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid orange;
        }
  • 下侧橙色,说明下侧有border,颜色为橙色
  • 左侧斜线,右侧斜线,说明左右border有设置,没有颜色说明颜色是transparent

2

css 复制代码
 .triangle {
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid orange;
        }
  • 上侧橙色,说明上侧有border,颜色为橙色
  • 左侧斜线,右侧斜线,说明左右border有设置,没有颜色说明颜色是transparent

3

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

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

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

或者

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

4

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

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

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

或者

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

5

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

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

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

或者

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

6

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

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

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

或者

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

2 线性渐变实现

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

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

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

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

3 裁减路径实现

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

css 复制代码
 .triangle {
            width: 100px;
            height: 100px;
            background: orange;
            clip-path: polygon(0 0,100% 0, 100% 100%);
相关推荐
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼2 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode6 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu6 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu6 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu6 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript