使用CSS將div的底部彎曲到內部
P粉617237727
2023-08-24 21:15:13
<p>我想用CSS彎曲這個長方形div/背景的底邊，所以結果是這樣的：</p>
<p>
有人知道如何實現它嗎？ </p>
<p>
<pre class="brush:css;toolbar:false;">.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius:0 0 200px 200px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="curved"></div>
</div></pre>
</p>
檢查一下。我用 :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; }只需使用
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; }