【发布时间】：2023-03-20 00:41:01
【问题描述】：
我目前正在尝试生成“波浪状的鬼底”形状。此形状包含两条双曲线：
虽然this image的底部我认为用更好的图像来描绘它。
我的代码
我当前尝试生成此形状是使用伪元素和overflow: hidden，尽管这不允许使用渐变背景（需要纯背景）：
尝试 1 - 使用隐藏溢出的伪元素
.bottom {
height: 300px;
width: 300px;
background: lightgray;
position: relative;
overflow: hidden;
margin-top:-150px;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.bottom:before, .bottom:after{
position: absolute;
content: "";
background: white;
}
.bottom:before {
height: 150%;
width: 150%;
top: 50%;
border-radius:50%;
left: -45%;
}
.bottom:after {
height: 200%;
width: 100%;
bottom: -40%;
border-radius:50%;
left: 90%;
}<div class="bottom"></div>尝试 2 - 使用具有 's' 形状的伪元素
.bottom {
background: lightgray;
width: 300px;
height: 300px;
position: relative;
overflow:hidden;
color:white;
border-radius:0 100% 0 100%;
}
.bottom:before{
content:"S";
position:absolute;
height:100%;
width:100%;
top:-100%;
left:-75%;
font-size:60em;
font-family: 'arial';
}
.bottom:after{
content:"S";
position:absolute;
height:100%;
width:100%;
top:-150%;
left:-75%;
font-size:60em;
font-family: 'arial';
}<div class="bottom"></div>尝试 3 - 额外元素和盒子阴影
我最近也尝试过使用盒子阴影和额外元素（我可以接受），但即便如此，我也无法正确创建它：
.bottom {
height:300px;
width:300px;
position:relative;
overflow:hidden;
}
.bottom-left {
position:absolute;
top:50%;
left:-50%;
height:100%;
width:100%;
border-radius:50%;
box-shadow: inset -35px 35px 0px -24px rgba(50, 50, 50, 1);
z-index:8;
background:white;
}
.top {
position:absolute;
height:100%;
top:-35%;
left:0;
width:50%;
border-radius:50%;
z-index:8;
background:gray;
box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
}
.top-right {
position:absolute;
top:-80%;
left:45%;
height:120%;
width:100%;
border-radius:50%;
box-shadow:inset 35px -35px 0px -24px rgba(50, 50, 50, 1);
border:20px solid gray;
}
.bigone {
position:absolute;
top:0;
left:-20%;
height:105%;
width:100%;
border-radius:50%;
box-shadow:inset -35px -35px 0px -24px rgba(50, 50, 50, 1);
-webkit-transform:rotate(-30deg);
transform:rotate(-30deg);
-webkit-transform-origin:center center;
transform-origin:center center;
background:gray;
}<div class="bottom">
<div class="bottom-left"></div>
<div class="top"></div>
<div class="top-right"></div>
<div class="bigone"></div>
</div>这些方法似乎都不能轻松生成这种双曲线形状，并且需要“块色背景”
注意：我不愿意求助于 SVG，因为我已经完成了 90% 的“整体形状”只使用纯 css，所以完成这个没有 svg 元素会很好/很好
内部形状将是块颜色，但边框在我的设计中不是强制性/关键的。
this is where I would like to add it to
更新
【问题讨论】：
-
坦率地说，我怀疑这是否可以使用 CSS（至少在没有多个元素的情况下）...SVG 将是我要走的路。
-
虽然 CSS 可能不是正确的工具，但当被要求产生“幽灵般的底部”时，我很想看看互联网会出现什么。
-
查看css shapes这个很棒的链接我不认为那里有你想要的那种形状，但你可以看看制作纯css复杂形状的技术.希望对你有帮助
-
@jbutler483 这不是使用 CSS 制作这种奇怪形状的原因
-
@jbutler483 我称之为“精灵效应”。苹果用这个术语来描述“最小化到停靠”动画，这看起来很相似。
标签： css svg css-shapes