如何使用 CSS 将剪切曲线放置在背景顶部？

如何在背景顶部放置剪切曲线

目标是修改提供的 CSS 代码以定位剪切曲线（ .top）位于背景（.box）的顶部，而不是右侧。

CSS代码说明：

在原始代码中，.top使用translate:translateY(-100%) 相对于其父.box 定位元素。这有效地将其放置在背景下方。

要将曲线移动到顶部，我们需要：

1. 调整 .box 容器的顶部边距以在其上方创建空间.
2. 使用伪元素重新定位 .top 元素以在顶部创建曲线。

修订的 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;
}

工作原理：

• .box 容器现在的 margin-top 为 90px，在其上方为剪切曲线提供空间。
• .top 元素被移除，并在 .box 容器下方创建两个伪元素。
• 这些伪元素使用渐变来创建曲线形状。
• transform-origin:right 和 transform :scaleX(-1) 用于第二个伪元素以水平翻转曲线。

通过实施这些更改，剪切曲线现在将根据需要定位在背景顶部。

以上是如何使用 CSS 将剪切曲线放置在背景顶部？的详细内容。更多信息请关注PHP中文网其他相关文章！