首頁  >  文章  >  web前端  >  如何使用 CSS 建立弧形頂部背景?

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

Barbara Streisand
Barbara Streisand原創
2024-11-02 17:38:02902瀏覽

How to Create a Curved Top for a Background Using 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn