Question

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

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

我希望刮水器在屏幕外向右开始，然后在屏幕外向左结束。当刮水器处于一半时，屏幕必须完全被刮水器充满。

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

宽度：刮水器必须在中间占满屏幕的宽度百分比。

左开始：应该以百分比表示左开始的属性，以使抽头位于屏幕右端。

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>

计算偏斜的div的左css值

1 个答案: