浏览器遮罩html,html-使用css-transforms为所有浏览器创建遮罩,遇到定位问题

基本上,将元素转换(在此处旋转)后,会将它们从流程中删除-因此,尺寸标注将不会像您不选择时那样表现.

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

>如果您旋转a侧的45度正方形(此处为70vh正方形),则对角线将为√2* a〜1.414 * a,

>因为transform-origin在此处居中,这意味着溢出宽度或高度等于(1.414 * a-a)/ 2或(1.414-1)* a / 2.

>可以为容器的宽度声明类似的参数,该宽度等于宽度：calc(1.414 * 70vh)

请参见下面的演示：

body {

margin: 0;

}

.page {

width: 100vw;

height: 100vh;

background: grey;

}

.container {

width: calc(1.414 * 70vh); /* changed */

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(0.414 * 70vh / 2); /* changed */

left: calc(0.414 * 70vh / 2); /* added */

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;

}

使用背景图片

对于近乎完美的遮罩,您可以：

>将图像移动到reset-tri容器中的背景图像,然后

>添加一个scale(1.414)转换以完全填充原始未转换的tri容器.

请参见下面的演示：

body {

margin: 0;

}

.page {

width: 100vw;

height: 100vh;

background: grey;

}

.container {

width: calc(1.414 * 70vh); /* changed */

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(0.414 * 70vh / 2); /* changed */

left: calc(0.414 * 70vh / 2); /* added */

transform-origin: center center;

background-color: transparent;

z-index: 2;

overflow: hidden;

}

.reset-tri {

position: relative;

z-index: 1;

transform: rotate(-45deg) scale(1.414); /* scale by √2 */

transform-origin: center center;

width: 70vh;

height: 70vh;

/* use a bacground image */

background-size: cover;

background-image: url("https://i-blog.csdnimg.cn/blog_migrate/0c5bd1bff4c3d0843f0de2171b2fd7f9.png");

}

使用图像元素

要在不使用背景图像的情况下实现近乎完美的蒙版,可以返回到之前的标记并添加object-fit：cover来填充包含其包装器内部容器尺寸的img元素-请参见下面的演示：

body {

margin: 0;

}

.page {

width: 100vw;

height: 100vh;

background: grey;

}

.container {

width: calc(1.414 * 70vh); /* changed */

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(0.414 * 70vh / 2); /* changed */

left: calc(0.414 * 70vh / 2); /* added */

transform-origin: center center;

background-color: transparent;

z-index: 2;

overflow: hidden;

}

.reset-tri {

position: relative;

z-index: 1;

transform: rotate(-45deg) scale(1.414); /* scale by √2 */

transform-origin: center center;

width: 70vh;

height: 70vh;

}

.inner-container {

height: 100%; /* fill the parent wrapper */

}

.inner-container > img {

width: 100%;

height: 100%;

object-fit: cover; /* the image fills the parent container */

}