如何使用 CSS 建立弧形頂部背景？

在背景頂部創建曲線

在提供的設計中，切口旨在出現在背景上方，而不是這是對的。以下是如何修改CSS 程式碼來實現此目的：

<code class="css">/* Make the box taller to accommodate the curve */
.box {
  margin-top: 90px;
}

/* Create the top and bottom pseudo elements */
.box:before,
.box:after {
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px; /* Adjust this to control the curve's height*/
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

/* Flip the after pseudo element */
.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}</code>

在此更新的程式碼中：

• 增加了框的上邊距以確保它比框高curve.
• 偽元素都位於框的底部（底部： 100%)。
• 調整偽元素的高度來控製曲線的高度。
• transform 屬性用於翻轉曲線的右側。

以上是如何使用 CSS 建立弧形頂部背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！