Html 使用css转换为遇到定位问题的所有浏览器创建掩码

我需要根据

vh

（无

clip path

）在所有浏览器中创建一个覆盖图像的掩码

我使用带有旋转变换的div作为遮罩，然后在内部反转旋转

我遇到的问题是内部的内容没有正确定位。图像需要与内部容器的左上角对齐

我试过：

• 使用“顶部”和“左侧”值进行定位不起作用
• 使用transform移动内部容器可以工作，但我无法找到所需的值是如何计算的

---

需要获得图像，使其左上角对齐并正常流动

基本上，当元素变换（此处旋转）时，它们会从流动中取出-因此尺寸不会像不变换时那样

一种方法是使用简单的数学：

• 如果将侧面

  a

  的正方形旋转45度（此处为70vh正方形），则对角线将为

  √2*a

  ~

  1.414*a

  ,
• 因为

  变换原点

  在这里是

  中心

  ，这意味着溢出宽度或高度等于

  （1.414*a-a）/2

  或

  （1.414-1）*a/2

• 对于宽度等于

  宽度：calc（1.414*70vh）

请参见下面的演示：

正文{
保证金：0；
}
.第页{
宽度：100vw；
高度：100vh；
背景：灰色；
}
.集装箱{
宽度：计算值（1.414*70vh）；/*已更改*/
高度：100vh；
背景颜色：蓝色；
位置：绝对位置；
左：0；
排名：0；
z指数：0；
}
崔先生{
位置：绝对位置；
宽度：70vh；
高度：70vh；
变换：旋转（45度）；
顶部：计算值（0.414*70vh/2）；/*已更改*/
左：计算值（0.414*70vh/2）；/*增加*/
变换原点：中心；
背景色：透明；
z指数：2；
溢出：隐藏；
}
.重置tri{
位置：相对位置；
z指数：1；
变换：旋转（-45度）；
变换原点：中心；
}
.内胆{
背景：黑色；
}

如果您转到链接，您会看到图像未在菱形内部与左上角对齐菱形内部的img应与左上角对齐，而不是空间中的任意点链接与现在的样子不同…不是它应该看起来的样子。您不断重复相同的事情。让我们看看它应该是什么样子。粉红色-IMG黑色-内部蓝色-三个容器-深紫色-感谢全面的答案。然而，img元素的定位仍然是这里的问题。它不与父对象的左上角对齐感谢背景图像解决方案。我仍然看不到如何在这里面定位元素however@jwtea很抱歉回复太晚，我想我昨天已经更新了答案。。。已经在上面添加了背景图像和图像元素选项…非常感谢kukkuz。我已经设法避免在IE中使用适用于此的对象，感谢您的帮助！

.container {
  width: 70vh;
  height: 100vh;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.tri {
  position: absolute;
  width: 70vh;
  height: 70vh;
  transform: rotate(45deg);
  top: calc((100vh - 70vh) / 2);
  transform-origin: center center;
  background-color: transparent;
  z-index: 2;
  overflow: hidden;
}

.reset-tri {
  position: relative;
  z-index: 1;
  transform: rotate(-45deg);
  transform-origin: center center;
}

.inner-container {
  background: black;
}