如何使用 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中文网其他相关文章！