Heim > Fragen und Antworten > Hauptteil
P粉9365685332023-08-25 15:27:24
检查一下。我用 :after 伪元素创建了这个。如果背景是纯色的话会很有帮助。
.curved { margin: 0 auto; width: 300px; height: 300px; background: lightblue; position: relative; } .curved:after{ background: white; position: absolute; content: ""; left:0; right:0; bottom: -25px; height: 50px; border-radius: 50% 50% 0 0; }
<div class="container"> <div class="curved"></div> </div>
P粉5643017822023-08-25 10:20:51
只需使用border-radius
并依赖一些溢出。您还可以考虑伪元素以避免额外的标记:
.container { margin: 0 auto; width: 500px; height: 200px; background: lightblue; position: relative; overflow: hidden; } .container:after { content: ""; position: absolute; height: 80px; left: -10%; right: -10%; border-radius: 50%; bottom: -25px; background: #fff; }
<div class="container"> </div>