如何在 <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>

如何在 <div> 元素周围创建凹形边框？

How do I create concave shaped borders around <div> elements?

html

css

border

concave

css-shapes