Question

目标是创建类似这样的内容：

.square {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(45deg, purple 50%, gray 50%);
}

<div class="square"></div>

使用正方形很容易，因为我们知道，如果我们从彼此前面的两个角开始绘制一条线，则它将与另一侧相邻的地方倾斜45度。但是，如果我们不知道元素的宽度和高度，但是我们想要保持效果怎么办？只是一种逻辑，但可能有助于找到解决方案：可以通过对所需参数进行平方变换（scale）-d来获得效果，但是问题仍然存在：我们不知道那些参数。另一个逻辑：如果渐变是背景大小的图像（质量较差），则可以拉伸它。

有什么想法吗？

Answer 1

也许您可以尝试将clip-path与:after和'：before'伪类一起使用。

.square {
  width: 100px;
  height: 100px;
  position: relative;
}

.rectangle {
  margin-top: 1em;
  width: 100px;
  height: 200px;
  position: relative;
}

.square:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: grey;
  clip-path: polygon(100% 100%, 0 0, 100% 0);
}

.square:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: purple;
  clip-path: polygon(100% 100%, 0 0, 0 100%);
}

<div class="square"></div>

<div class="rectangle square"></div>

Answer 2

是的，有a syntax for corners！

.square {
  width: 200px;
  height: 100px;
  background-image: linear-gradient(to top right, purple 50%, gray 50%);
}

<div class="square"></div>

有没有一种方法可以指定线性渐变的拐角？

2 个答案: