在背景頂部創建曲線
在提供的設計中,切口旨在出現在背景上方,而不是這是對的。以下是如何修改 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>
在此更新的程式碼中:
以上是如何使用 CSS 建立弧形頂部背景?的詳細內容。更多資訊請關注PHP中文網其他相關文章!