CSS如何实现从右上角开始填充div的颜色过渡效果

最优方案为使用CSS线性渐变配合背景尺寸过渡实现，无需额外DOM节点，性能优异且可完美适配容器圆角样式。

效果示例 #

实现思路 #

• 利用线性渐变作为容器背景，两个色值分别为填充色和透明色，渐变方向设置为从右上角到左下角
• 初始状态设置background-size为0 0，background-position固定为右上角，此时渐变完全不可见
• 触发状态（如hover、类名切换）下将background-size设置为100% 100%，配合提前设置的transition属性即可实现从右上角逐步铺满整个容器的过渡效果

完整代码 #

HTML代码 #

<div id='box'></div>

CSS代码 #

#box {
  border: 2px solid blue;
  border-radius: 15px;
  width: 50px;
  height: 50px;
  transition: 0.5s ease;
  /* 新增渐变背景配置 */
  background-image: linear-gradient(to left bottom, #f00, #f00);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 0 0;
}
/* hover触发填充效果，也可根据需求切换为自定义类触发 */
#box:hover {
  background-size: 100% 100%;
}

代码说明 #

• 渐变的色值可以根据需求替换为任意颜色，也可以设置为多色渐变
• 如果需要保留原容器背景色，可将渐变填充改为background-image: linear-gradient(to left bottom, #f00, #f00), linear-gradient(transparent, transparent)，第二个渐变设置为原容器背景色即可
• 过渡时长和缓动函数可直接修改原transition属性的参数进行调整

内容的提问来源于stack exchange，提问作者user17143939