当前位置： 首页 > news >正文

CSS线性渐变拼接，一个完整的渐变容器(div),要拆分成多个渐变容器(div)，并且保持渐变效果一致

news 2025/7/9 9:45:42

1 需求

一个有渐变背景的div，需要替换成多个渐变背景div拼接，渐变效果需要保持一致（不通过一个大的div渐变，其他子的div绝对定位其上并且背景透明来解决）

2 分析

主要工作：

  1. 计算完整div背景线性渐变时的渐变开始线和结束线（假设中心点为几何中心）
  2. 计算各个独立div背景线性渐变时的渐变开始线和结束线（假设中心点为几何中心）
  3. 重新计算各个子div的渐变开始线和结束线(百分比)

3 实现

3.1 水平拼接

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template><div class="container gradient"></div><div class="container"><divclass="container-column"v-for="(col, index) in itemList":key="index":style="{width: col.width + 'px',height: col.height + 'px',background: getGradient(col, index)}"></div></div>
</template><script setup lang="ts">
const itemList = ref([{width: 100,height: 400},{width: 200,height: 400},{width: 300,height: 400}
]);
const angle = ref(45);const getGradient = (item, index) => {const beforeWidth = itemList.value.slice(0, index).reduce((a, b) => a + b.width, 0);const afterWidth = itemList.value.slice(index + 1).reduce((a, b) => a + b.width, 0);const startPosition = `calc(100% - (${beforeWidth} * sin(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const endPosition = `calc((${afterWidth} * sin(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const ret = `linear-gradient(${angle.value}deg,red ${startPosition},blue ${endPosition})`;return ret;
};
</script>
<style scoped lang="scss">
.container {width: 600px;height: 400px;display: inline-block;.container-column {display: inline-block;}
}
.gradient {background: linear-gradient(45deg, red 0%, blue 100%);
}
</style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

3.2 垂直拼接

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template><div class="container gradient"></div><div class="container"><divclass="container-column"v-for="(col, index) in itemList":key="index":style="{width: col.width + 'px',height: col.height + 'px',background: getGradient(col, index)}"></div></div>
</template><script setup lang="ts">
const itemList = ref([{width: 400,height: 100},{width: 400,height: 200},{width: 400,height: 300},{width: 400,height: 300}
]);
const angle = ref(45);const getGradient = (item, index) => {const afterHeight = itemList.value.slice(0, index).reduce((a, b) => a + b.height, 0);const beforeHeight = itemList.value.slice(index + 1).reduce((a, b) => a + b.height, 0);const startPosition = `calc(100% - (${beforeHeight} * cos(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const endPosition = `calc((${afterHeight} * cos(${angle.value}deg) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const ret = `linear-gradient(${angle.value}deg,red ${startPosition},blue ${endPosition})`;return ret;
};
</script>
<style scoped lang="scss">
.container {width: 400px;height: 900px;display: inline-block;& + .container {margin-left: 10px;}line-height: 0;.container-column {display: inline-block;}
}
.gradient {background: linear-gradient(45deg, red 0%, blue 100%);
}
</style></style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

3.3 矩阵拼接

在这里插入图片描述

图上画线太多，下图画个稍微简明点的

在这里插入图片描述

解释：

  • 黑色虚线为各个子div的水平和垂直中心线
  • 红色虚线为整个div的水平和垂直中心线
  • 绿色虚线为渐变方向上的中心线，和黑色虚线的夹角为各个子div的渐变角
  • 紫色虚线为渐变方向上的中心线，和红色虚线的夹角为整个div的渐变角
  • 蓝色虚线为渐变开始线和结束线，垂直于渐变方向上的中心线
  • 蓝色圆为各个子div独立渐变时的渐变起始中心点，绿色圆为各个子div独立渐变时的渐变结束中心点
  • 紫色圆为整个div的渐变起始中心点，红色圆为整个div的渐变结束中心点
  • 蓝色紫色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变起始中心点，是重合的
  • 绿色红色双圆为当前子div独立渐变时和其作为整个div整体渐变的一部分时的共同渐变结束中心点，是重合的
  • 蓝色实线段为整个渐变路径，其长度为渐变长度，也就是颜色值后面的参数0-100%
  • 绿色实线段为为了作为整体渐变一部分而需要增加的渐变路径
<template><div class="container gradient"></div><div class="container"><div class="container-row" v-for="(row, rowIndex) in itemList" :key="rowIndex"><divclass="container-column"v-for="(col, colIndex) in row":key="colIndex":style="{width: col.width + 'px',height: col.height + 'px',background: getGradient(col, colIndex, rowIndex)}"></div></div></div>
</template><script setup lang="ts">
const itemList = ref([[{width: 100,height: 100},{width: 300,height: 100}],[{width: 200,height: 200},{width: 100,height: 200},{width: 100,height: 200}],[{width: 100,height: 300},{width: 100,height: 300},{width: 100,height: 300},{width: 100,height: 300}],[{width: 400,height: 300}]
]);
const angle = ref(45);const getGradient = (item, colIndex, rowIndex) => {const afterHeight = itemList.value.slice(0, rowIndex).reduce((a, b) => a + b[0].height, 0);const beforeHeight = itemList.value.slice(rowIndex + 1).reduce((a, b) => a + b[0].height, 0);const beforeWidth = itemList.value[rowIndex].slice(0, colIndex).reduce((a, b) => a + b.width, 0);const afterWidth = itemList.value[rowIndex].slice(colIndex + 1).reduce((a, b) => a + b.width, 0);const startPosition = `calc(100% - ((${beforeHeight} * cos(${angle.value}deg) + ${beforeWidth} * sin(${angle.value}deg))/ (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const endPosition = `calc(((${afterHeight} * cos(${angle.value}deg) + ${afterWidth} * sin(${angle.value}deg)) / (2 * (${item.width / 2} * tan(${angle.value}deg) + ${item.height / 2}) * cos(${angle.value}deg)) + 1) * 100%)`;const ret = `linear-gradient(${angle.value}deg,red ${startPosition},blue ${endPosition})`;return ret;
};
</script>
<style scoped lang="scss">
.container {width: 400px;height: 900px;display: inline-block;& + .container {margin-left: 10px;}.container-row {line-height: 0;.container-column {display: inline-block;}}
}
.gradient {background: linear-gradient(45deg, red 0%, blue 100%);
}
</style>

效果：

在这里插入图片描述

加上边框更清晰点：

在这里插入图片描述

4 最后

还可以有更复杂的情况：

  • 矩阵中的跨行跨列，大家可自行探索（其实投篮的办法是可以把跨行跨列的单元再进行拆分，使得所有单元都不出现跨行跨列，那么上面第三种矩阵拼接就可以使用了）
  • 多个颜色（中间的颜色需要根据当前百分比位置和增加的距离得到最终的百分比位置）
  • 非线性渐变的情况（感觉稍微有点复杂）
http://www.lryc.cn/news/431592.html

相关文章：

  • 【60天备战软考高级系统架构设计师——第十天：软件设计与架构综合练习】
  • 2024.8.15（python管理mysql、Mycat实现读写分离）
  • CMU 10423 Generative AI：lec2
  • 恋爱相亲交友系统源码原生源码可二次开发APP 小程序 H5，web全适配
  • OceanBase 4.x 存储引擎解析：如何让历史库场景成本降低50%+
  • js 如何写构造函数 ，构造函数和普通函数有什么区别
  • MySQL-进阶篇-锁（全局锁、表级锁、行级锁）
  • c++懒汉式单例模式(Singleton)多种实现方式及最优比较
  • Gartner《2024中国安全技术成熟度曲线》AI安全助手代表性产品：开发者安全助手D10
  • 奇安信椒图--服务器安全管理系统（云锁）
  • pointer-events，添加水印的一个小小点
  • 微服务--认识微服务
  • 【docker】docker 镜像仓库的管理
  • 第L2周：机器学习-线性回归
  • SpringMVC拦截器深度解析与实战
  • 直线上最多的点数
  • 经济管理专业数据库介绍
  • 【C++ Primer Plus习题】11.1
  • [数据库][oracle]ORACLE EXP/IMP的使用详解
  • 中国各银行流动性比例数据（2000-2022年）
  • MACOS安装配置前端开发环境
  • Docker 配置国内镜像源
  • AI模块在人工智能中扮演着什么样的角色
  • VM Workstation虚拟机AlmaLinux 9.4操作系统安装（桌面版安装详细教程）（宝塔面板的安装），填补CentOS终止支持维护的空白
  • 【学习笔记】卫星通信NTN 3GPP标准化进展分析（三）- 3GPP Release17 内容
  • 【SQL】常见语句合集
  • Cozer必备！一站式解锁扣子全网最全插件集锦（三）
  • 1-2宿主环境
  • Java进阶13讲__第九讲
  • 上海市计算机学会竞赛平台2024年8月月赛丙组等差数列的素性