计算偏斜 div 的左 css 值

Question

我有一个擦拭器 div，我想用它来对角擦拭父级 div。雨刮器 div 具有以下 class:

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

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

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

宽度： 擦拭器的宽度百分比必须是多少，才能在一半时填满屏幕。

Startleft: 起始左侧属性的百分比应该是多少，才能使雨刮器刚好在屏幕右侧。

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>

计算偏斜 div 的左 css 值

Calculate left css value for skewed div

javascript

css

math

skew