我需要创建一个遮罩,以在基于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>
