我目前正在尝试生成“波浪形幽灵底部”形状。该形状包含两条双曲线：
虽然底部的部分这个图片 http://images.clipartpanda.com/ghost-clip-art-castle-ghost-clipart1.jpg我认为以更好的形象来描绘它。
My Code
我当前尝试生成此形状是使用伪元素和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，因为我仅使用纯 css 完成了 90% 的“整体形状”，所以完成这个会很好/很好没有 svg 元素
内部形状将是块颜色，但边框在我的设计中不是强制性/关键的。
这是我想将其添加到的地方 http://jsfiddle.net/jbutler483/x65qkh3k/22/
Update
- 这是我能得到的最接近的 http://jsfiddle.net/jbutler483/r3cn1ea0/2/
考虑到：
CSS 似乎不适合这里，而 SVG方式更合适。为了说明这一点，请参阅以下两个片段：
SVG
DEMO http://jsfiddle.net/webtiki/L9zknmn5/
/*** FOR THE DEMO **/
svg{
display:block;
width:70%;
margin:0 auto;
opacity:0.8;
}
body{
background: url('http://lorempixel.com/output/people-q-g-640-480-7.jpg');
background-size:cover;
}
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 80">
<path stroke-width="1" stroke="#000" fill="grey" d="M95 5 Q70 20 70 38 T50 65 Q55 50 30 40 T5 5z"/>
</svg>
CSS
DEMO http://jsfiddle.net/webtiki/fwbcqgd8/（考虑到我只在形状的右侧制作了一条双曲线）
.ghost {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.ghost:before,
.ghost:after {
content: '';
position: absolute;
}
.ghost:before {
bottom: 0;
right: 50%;
width: 70%;
height: 30%;
transform-origin: 100% 100%;
transform: skewY(30deg) rotate(20deg);
box-shadow: -100px -100px 0px 99px #656565;
border-top-right-radius: 30% 100%;
}
.ghost:after {
top: 0;
right: 0;
transform-origin: 100% 0;
transform: skewX(-10deg) rotate(-20deg);
box-shadow: none;
height: 107px;
width: 173px;
border-top-left-radius: 90% 100%;
box-shadow: -30px -30px 0px 29px #656565, 60px -110px 0px 109px #656565;
}
<div class="ghost">
</div>
请注意，我没有列出在这种情况下使用 svg 的优点（响应能力、输出质量、曲线控制、边框、边框颜色/不透明度、填充颜色/不透明度、透明度、可维护性、构建形状的时间量） ...)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
