计算偏斜的div的左css值

Question

我有一个wiper div，我想用它对角地擦拭父div。 抽头div具有以下类别：

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

我希望刮水器在屏幕外从右侧开始，并在屏幕外从左侧结束。 当刮水器处于一半位置时，屏幕必须完全被刮水器充满。

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

宽度：刮水器在中途填满屏幕的宽度必须达到多少百分比。

Startleft：左开始的百分比属性应为多少，以使抽头位于屏幕右侧之外。

Endleft： left的结尾属性应该是什么，以使抽头位于屏幕外。

这是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>