[英]How do I create concave shaped borders around <div> elements?
我正在尝试像这样在<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 。
您可以使用: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.