凹凸形状div

Question

我正在处理div的凹凸形状。我想要一个凹形，在鼠标悬停时它会变成凸形。谁能指出我正确的方向？到目前为止，这是我在下面尝试过的示例代码是图片

.section {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px; 
  content: '';
  right: -20%;
  left: -20%;
  top: 100%;
	transition: all 0.4s ease-in-out;
}

.inner:after {
  bottom: 100%;
  top: auto;
}

.inner:hover:after {
	height: 0;
}

<div class="section">
  <div class="inner"></div>
</div>

Answer 1

你很近。您可以使用:before和'：after'来实现该功能。 :before与'：after'几乎相同，只是位置top不同。

.card {
    height: 100px;
    background-color: tomato;
}
.section {
  top: 50px;
  position: relative;
  overflow: hidden;
  padding: 50px 0 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px; 
  content: '';
  right: -20%;
  left: -20%;
  top: -150px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:after {
	top: -120px;
}

.inner:before {
    box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px; 
  content: '';
  right: -20%;
  left: -20%;
  top: 130px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:before {
	top: 50px;
}

<div class='card'>
  <div class="section">
    <div class="inner"></div>
  </div>
</div>