如何使用 CSS 將鏤空頂部轉換為弧形頂部背景？

將切口頂部轉換為弧形頂部背景

在這個基於代碼的任務中，我們的目標是將位於塊右側的切口轉換為彎曲的形狀優雅地坐落在塊的頂部。

目前的程式碼片段涉及一個包含 .top 元素的 .box。雖然所需的效果是將切口放在頂部，但代碼將其放在右側。那麼，讓我們深入了解修訂版：

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  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;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

關鍵調整：

• 我們已將.box 上的margin-top 設定為至少匹配偽元素的高度，確保切口不會與塊重疊。
• 偽元素現在使用底部定位在 .box 的底部：100%。
• 偽元素的高度設定為 80px，您可以調整該高度來控製曲線的高度。
• 背景漸變已修改以建立所需的徑向效果。

瞧！現在，您有了一個從塊頂部無縫流動的彎曲切口。請隨意進一步實驗並創建一條完美補充您的設計的曲線。

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