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

Question

我有一个问题，希望有人能提供帮助。所以我正在尝试创建一个钻石div 形状，它本身就是一个链接：

在这种情况下，由于溢出到其他块，因此创建这些单独的 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 似乎受到了旋转的影响。

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

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

非常感谢:)

Answer 1

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

Transform 的转换顺序非常具体。

Answer 2

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

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