在這個基於代碼的任務中，我們的目標是將位於塊右側的切口轉換為彎曲的形狀優雅地坐落在塊的頂部。
目前的程式碼片段涉及一個包含 .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>關鍵調整：
瞧！現在，您有了一個從塊頂部無縫流動的彎曲切口。請隨意進一步實驗並創建一條完美補充您的設計的曲線。
以上是如何使用 CSS 將鏤空頂部轉換為弧形頂部背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
