计算偏斜div的左css值

Question

我有一个擦拭器div，我想用它沿对角线擦拭父div。雨刮器分区具有以下类别：

.wiper {
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: orange;
transform: skew(45deg);
}

我希望雨刮器从屏幕外的右边开始，到屏幕外的左边结束。当刮水器刮到一半时，刮水器必须完全充满屏幕。

问题是，我不知道雨刷的父母有多大。所以我需要计算以下内容：

宽度：雨刮器必须有多宽(百分比(，才能在刮到一半时填满屏幕。

起始左：如果雨刷刚好在屏幕右侧，起始左属性的百分比应该是多少。

Endleft：如果雨刷刚好在屏幕左侧，Endleft属性应该是什么。

以下是jsfiddle中的一个示例，但使用了硬编码的值。我只是不知道如何计算相对值，当处理一个偏斜的div.

http://jsfiddle.net/jpg850kx/22/

Answer 1

在不需要复杂计算的情况下，我会使用梯度来做一些不同的事情：

body,
html {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 20px;
}
#wrapper {
width: 60%;
height: 100%;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.wiper {
position: absolute;
height: 200%;
width: 400%;
top: 0;
left: 100%;
z-index:1;
background-image:
linear-gradient(to bottom left,orange 49.5%,transparent 50%),
linear-gradient(to top right,orange 49.5%,transparent 50%);
background-size:50.1% 100%;
background-repeat:no-repeat;
background-position:left,right;
transition:all 3s;
}
#wrapper:hover .wiper{
left:-300%;
}

<div id="wrapper">
<div class="content">
Old content
</div>
<div class="wiper"></div>
</div>