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

Question

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

在这种情况下，由于溢出到其他块，因此为带有链接的钻石创建这些单独的 div 和图像在这种情况下将不起作用。

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

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

.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）可以获得所需的效果？

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

非常感谢 ：）

标签： htmlcsscss-transforms

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>