凹凸形狀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>