html - 如何使用 CSS 更改线条透视图？

Question

我希望能够仅使用 CSS 来锐化我的线条。我想知道 transform 属性是否允许跨浏览器适应。

我有点烦恼，因为我知道在我的 div 上使用渐变 background 是可能的，但是我的应用程序的背景属性无法更改。有什么方法可以使用 transform 来做到这一点吗？

.element {
  position: absolute;
  transform: rotate(135deg); /* would perspective property help ? */
  left: 110px;
  top: 0px;
  background: rgb(255, 0, 0); /* cannot be changed */
  width: 1px;
  height: 243px;
  border: 0px solid red;  /* cannot be changed */
  /* you can add more property too */
}

<div class="element"></div>

有什么解决办法吗？

Answer 1

如果您不能直接更改背景，您可以在其之上覆盖一个伪元素。在伪元素的背景中使用线性渐变。

.element {
  position: absolute;
  transform: rotate(135deg); /* would perspective property help ? */
  left: 110px;
  top: 0px;
  background: rgb(255, 0, 0); /* cannot be changed */
  width: 1px;
  height: 243px;
  border: 0px solid red;  /* cannot be changed */
  /* you can add more property too */
}
.element::after {
  content: '';
  display: block;
  background: linear-gradient(to bottom, red, white);
  width: 1px;
  height: 243px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="element"></div>