I am trying to make concave shaped top and bottom borders around a <div>
like this:
My current 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;
}
But it only works only on the bottom border and sometimes disappears on mobile devices.
Here is JS Fiddle .
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.