如何在周圍創建凹形邊框 <div> 元素？

Question

我正在嘗試像這樣在<div>周圍制作凹形的頂部和底部邊框：

我目前的CSS：

.div:after {    
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 20px #f2f2f2;
    z-index:-1;
}

但它僅在底部邊框上起作用，有時在移動設備上消失。

這是JS Fiddle 。

Answer 1

您可以使用:before和:after偽元素來繪制此形狀。

 .div { position: relative; overflow: hidden; padding: 50px 0; } .div-inner { position: relative; background: black; height: 120px; } .div-inner:before, .div-inner:after { box-shadow: 0 0 0 80px #000; border-radius: 100%; position: absolute; height: 150px; /* You can change height to increase or decrease concave radius */ content: ''; right: -20%; left: -20%; top: 100%; } .div-inner:after { bottom: 100%; top: auto; } 

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