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

Question

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

在这种情况下，由于会溢出到其他 block ，因此在这种情况下无法使用例如带有链接的菱形图像创建这些单独的 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>

通过运行它，您可以看到在变换属性中，旋转和倾斜不能一起工作，因为倾斜似乎受到旋转的影响。

有没有其他人在尝试创建这样的自定义形状时遇到过同样的事情？是否有其他方法(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>

使用剪辑路径:

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