CSS 变换 - 旋转和倾斜不能一起工作

Question

我有一个问题，希望有人能帮忙解答。所以我正在尝试创建一个钻石 div 形状，它本身就是 link:

在这种情况下，由于溢出到其他方块，用 link 围绕钻石创建单独的 div 和图像将不起作用。

所以我的第一个想法是创建一个 div 并在 CSS 中使用 transform 以获得所需的效果：

但是，当尝试创建它时，得到以下信息：

.test {
 width: 192px;
 height: 144px;
 transform: skewX(-40deg) rotate(25deg);
 display: block;
 background-color: red;
 top:50px;
 left:50px;
 position:absolute;
}

<div class="test"></div>

通过运行这个，你可以看到在transform属性中，rotate和skew不能一起工作，因为看起来skew是受rotate影响的。

有没有其他人在尝试创建这样的自定义形状时遇到过同样的事情？有没有其他方法（CSS 或 Javascript）可以获得我想要的效果？

如有任何帮助，我们将不胜感激。如果有人需要任何进一步的信息，请告诉我。

非常感谢:)

Answer 1

您需要在倾斜之前声明旋转。

Transform 的转换顺序非常具体。

Answer 2

正如我在另一个答案中解释的那样 ()。乘法是从左到右但视觉效果是从右到左：

.test {
 width: 192px;
 height: 144px;
 transform:rotate(25deg)  skewX(-40deg) ;
 display: block;
 background-color: red;
 top:50px;
 left:50px;
 position:absolute;
}

<div class="test"></div>

顺便说一句，这里有一些替代方法可以在不进行变换的情况下实现相似的形状。

带渐变：

.box {
  width:200px;
  height:100px;
  background:
    linear-gradient(to top right, red 49%,transparent 50%) top right,
    linear-gradient(to top left, red 49%,transparent 50%) top left,
    linear-gradient(to bottom right, red 49%,transparent 50%) bottom right,
    linear-gradient(to bottom left, red 49%,transparent 50%) bottom left;
  background-size:50% 50%;
  background-repeat:no-repeat;
}

<div class="box">
</div>

与clip-path:

.box {
  width: 200px;
  height: 100px;
  background: red;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<div class="box">
</div>

使用 SVG：

<svg viewBox="0 0 200 100" width='200'>
<polygon points="0 50,100 0,200 50,100 100" fill=red />
</svg>

CSS 变换 - 旋转和倾斜不能一起工作

CSS Transform - Rotate & Skew doesn't work together

html

css

css-transforms