Marek Marek - 10 days ago 8
CSS Question

Concave top and bottom border

I trying to do concave top and bottom div border, like this ->

enter image description here

I used this:

.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;
}


but it works only on bottom border and sometimes
disappears on mobile devices. the width is too big.

http://jsfiddle.net/yefw4/728/

Answer

You can use :before and :after pseudo elements to draw this shape.

.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>

Comments