首页 > web前端 > css教程 > 正文

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

Barbara Streisand
发布: 2024-11-02 14:01:30
原创
514 人浏览过

How to Position a Cutout Curve at the Top of a Background Using 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板