计算倾斜 div 的左 css 值

Question

我有一个擦除器 div，我想用它对角地擦除父 div。 雨刮器 div 具有以下类：

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

我希望雨刷从屏幕右侧开始，并在屏幕左侧结束。 刮水器到一半时，屏幕必须被刮水器完全填满。

问题是，我不知道wipers parent 有多大。所以我需要计算以下内容：

宽度：刮水器的宽度百分比必须是多少，才能在中途填满屏幕。

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>