如何使用 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>

在此更新的代码中：

• 增加了框的上边距以确保它比框高曲线。
• 伪元素均位于框的底部（底部：100%）。
• 调整伪元素的高度来控制曲线的高度。
• transform 属性用于翻转曲线的右侧。

以上是如何使用 CSS 创建弧形顶部背景？的详细内容。更多信息请关注PHP中文网其他相关文章！