CSS颜色部分沿对角线方向潜入

Question

是否有可能实现对角线行程,在任何一侧都有一点偏移.我已经看到了用css线性渐变实现的这种变化,但我需要稍微不同的东西.我不知道如何用文字描述我需要的东西.我会用图片.

我试过玩渐变:

.diagonal{
  background-color: #34ADFF;
  background-image: linear-gradient(to right top, whitesmoke 50%, #34ADFF 50%);
  height: 300px;
}

<div class="diagonal">
</div>

那是我走了多远.我正在考虑玩儿童div,但我还不确定.

有任何想法吗 ？

我不想使用图像,我只想使用CSS.

Answer 1

我能够使用以下线性渐变获得所需的结果：

linear-gradient( 6deg,  transparent 73%, rgba(50, 87, 106, 0.72) 27%);

您可以非常轻松地控制形状。

第一个参数或linear-gradient( 6deg... 控制倾斜程度-您也可以使用负值

每种颜色后面的百分比控制分割线的位置。

如果数字不相加，100%分隔线就会变得模糊。

background-blend-mode:overlay;我在下面的示例中添加了图像背景以用于演示目的。

linear-gradient( 6deg,  transparent 73%, rgba(50, 87, 106, 0.72) 27%);

body {
  text-align: center;
}

.test {
  height: 400px;
  width: 500px;
  margin: 0 auto;
  display: inline-block;
  background: url(https://unsplash.it/500/400), linear-gradient( 6deg,  transparent 73%, rgba(50, 87, 106, 0.72) 27%);
  background-blend-mode:overlay;
}