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%);
相关推荐
excel10 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手10 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360212 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep13 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo15 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒35 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用37 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react