剪辑路径的过渡 - 如何改变方向？

Question

我正在使用剪辑路径，并创建了一个带有切角的盒子。当悬停时，它会闭合并变成一个完整的正方形。我感兴趣的是，是否可以选择关闭的方向？从现在开始，它会自下而上地关闭，但我希望它能够自上而下地关闭。这到底可行吗？

.shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

.shape:hover {
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
}

.shape:hover:before {
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
}

<div class="shape"></div>

Answer 1

您有 2 个

80%

，调整第一个而不是第二个。

.shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {                  /* this one -----v */
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

.shape:hover,
.shape:hover:before{
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

<div class="shape"></div>

Answer 2

按如下方式调整您的剪辑路径...只需交换几个％值。

.shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {
  clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}

.shape:hover {
  clip-path: polygon(100% 0, 100% 100%, 80% 100%, 0 100%, 0 0);
}

.shape:hover:before {
  clip-path: polygon(100% 0, 100% 100%, 80% 100%, 0 100%, 0 0);
}

<div class="shape"></div>