CSS - 如何从角落创建颜色过渡？ [复制]

【问题标题】：CSS - How to create a color transition from the corner? [duplicate]CSS - 如何从角落创建颜色过渡？ [复制]
【发布时间】：2021-12-02 02:19:04
【问题描述】：

创建 CSS 颜色过渡以从右上角填充 div 的最佳方法是什么？

#box {
  border: 2px solid blue;
  border-radius: 15px;
  width: 50px;
  height: 50px;
  transition: 0.5s ease;
}

&lt;div id='box'&gt;&lt;/div&gt;

【问题讨论】：

标签： css css-transitions

【解决方案1】：

您可以使用linear-gradient 和background-image 上的方向：

#box{
    border: 2px solid blue;
    border-radius: 15px;
    width: 50px;
    height: 50px;
    transition: 0.5s ease;
    background-image: linear-gradient(to bottom left, blue, white);
}

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box">
    </div>
</body>

或者你也可以使用角度：

#box{
    border: 2px solid blue;
    border-radius: 15px;
    width: 50px;
    height: 50px;
    transition: 0.5s ease;
    background-image: linear-gradient(225deg, blue, white);
}

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box">
    </div>
</body>

【讨论】：