[英]How do I create concave shaped borders around <div> elements?
I am trying to make concave shaped top and bottom borders around a <div>
like this: 我正在尝试像这样在<div>
周围制作凹形的顶部和底部边框:
My current CSS: 我目前的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. 但它仅在底部边框上起作用,有时在移动设备上消失。
You can use :before
and :after
pseudo elements to draw this shape. 您可以使用: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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.