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不能一起工作，因为似乎歪斜受到了turn的影响。

在尝试创建这样的自定义形状时，是否还有其他人遇到过类似的事情？有没有其他方法（CSS或Javascript）可以达到预期的效果？

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

非常感谢：）

Answer 1

正如我在另一个答案（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>

Answer 2

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

转换非常具体，按照转换的顺序完成。