如何使用 CSS 建立曲線 Div？

使用 CSS 建立彎曲的 Div

您可以透過以下技術使用 CSS 在 div 上實現彎曲的底部邊緣：

使用Border-radius:

此方法涉及設定 border-radius 屬性來定義曲線的半徑。對於彎曲的底部邊緣，您可以使用以下語法：

border-radius: 0 0 200px 200px;

這將建立一個底部邊緣向內彎曲的 div。

使用徑向漸層：

如果你喜歡透明的彎曲形狀，你可以使用徑向漸層屬性：

body {
  background: pink;
}

.container {
  margin: 0 auto;
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}

此技術建立一個透明漸變，使div 的底部邊緣彎曲，從而產生微妙的曲線效果。

以下是與任一方法一起使用的範例HTML 程式碼：

<div>

更多變更和附加配置，您可以造訪作者的網站https://css-shape. com/curved-edge/。嘗試使用這些技術來創建令人驚嘆且具有視覺吸引力的彎曲 div。

以上是如何使用 CSS 建立曲線 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！