我需要创建一个遮罩,以在基于vh的所有浏览器中覆盖图像(无剪切路径)
我使用带有旋转变换的div作为蒙版,然后在内部反转旋转.
我遇到的问题是内部内容的位置不正确.图像需要与内部容器的左上方对齐.
我努力了：
>使用顶部和左侧的值进行定位无效.
>使用transform移动内部容器有效,但是我找不到所需的值是如何计算的.
https://jsfiddle.net/owfgLnv7/5/
.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;
}
需要获取图像,使其左上对齐并正常流动
最佳答案
基本上,将元素转换(在此处旋转)后,会将它们从流程中删除-因此,尺寸标注将不会像您不选择时那样表现.
一种方法就是使用简单的数学：
>如果您旋转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;
}<div class="page">
<div class="container">
<div class="tri">
<div class="reset-tri">
<div class="inner-container">
<img src="https://openclipart.org/download/230732/360sj3.svg" />
</div>
</div>
</div>
</div>
</div>使用背景图片
对于近乎完美的遮罩,您可以：
>将图像移动到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://openclipart.org/download/230732/360sj3.svg");
}<div class="page">
<div class="container">
<div class="tri">
<div class="reset-tri"></div>
</div>
</div>
</div>使用图像元素
要在不使用背景图像的情况下实现近乎完美的蒙版,可以返回到之前的标记并添加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 */
}<div class="page">
<div class="container">
<div class="tri">
<div class="reset-tri">
<div class="inner-container">
<img src="https://openclipart.org/download/230732/360sj3.svg" />
</div>
</div>
</div>
</div>
</div>