javascript - 计算倾斜 div 的左 css 值

Question

我有一个删除器 div，我想用它沿对 Angular 线删除父 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>