如何使用CSS更改行透视图？

Question

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

我有点困扰，因为我知道在我的div上使用渐变background是可行的，但我的应用程序无法更改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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

嗯，这是你可以通过透视实现的目标：

＆＃13;

＆＃13;

.element {
  position: absolute;
  transform: perspective(7px) rotate(135deg) rotateX(15deg); /* would perspective property help ? */
  transform-origin: right center;
  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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，当然，属性transform可以跨浏览器使用，但你应该添加前缀：

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);    /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */

要实现此效果，您应该使用属性linear-gradient而不是转换属性。

.element {
            position: absolute;
            transform: rotate(135deg);
            left: 110px;
            top: 0px;
            background: -webkit-linear-gradient(-90deg, red, yellow);
            width: 1px;
            height: 243px;
        }