基本上,将元素转换(在此处旋转)后,会将它们从流程中删除-因此,尺寸标注将不会像您不选择时那样表现.
一种方法就是使用简单的数学:
>如果您旋转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 */
}