双弯曲形状双弯曲形状(Double curved shape)

目前我正在试图产生一个“幽灵般的波浪底”形态。这种形状包含两个双曲线：

虽然底部这个图片我想描绘它更好的图像。

我的代码

我的当前的尝试以产生这种形状是使用伪构件和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元素

内部形状将是一个块的颜色，但边界不是强制性/关键在我的设计。

这是我想将它添加到

更新

这是最接近我已经能够得到

Answer 1:

考虑到：

所需的代码量
心双曲线的麻烦

CSS似乎并不被去，此地SVG 的方式比较合适的方式。为了说明这一点，看到这两个片段：

SVG

DEMO

 /*** FOR THE DEMO **/ svg{ display:block; width:70%; margin:0 auto; opacity:0.8; } body{ background: url('http://lorempixel.com/output/people-qg-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 （考虑我只对形状的右侧由一个双曲线）

 .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（响应速度，输出，曲线控制，边框，边框颜色/不透明的质量优势，填充颜色/不透明度，透明度，维护，大量的时间来构建形状...）

Answer 2:

您应该使用boxshadows和溢出，使该形状。

 body {background:url('http://whofortedblog.com/wp-content/uploads/2013/01/33c9f33218a6cab6054375fb76129a80.jpeg'); background-size: cover;} div { height: 100px; width: 200px; overflow: hidden; position: relative; -webkit-transform: scale(1,1.1); -moz-transform: scale(1,1.1); -ms-transform: scale(1,1.1); -o-transform: scale(1,1.1); transform: scale(1,1.1); } div:before { height: 80px; width: 100px; border-radius: 50% / 50%; box-shadow: 40px -11px 0 -20px white, 42px -22px 0 -10px white, 50px -28px 0 -8px white, 36px -95px 0 20px white; content: ""; position: absolute; -webkit-transform: scale(0.9,1.1); -moz-transform: scale(0.9,1.1); -ms-transform: scale(0.9,1.1); -o-transform: scale(0.9,1.1); transform: scale(0.9,1.1); top: 50%; left: -10px; } div:after { height: 70px; width: 120px; border-radius: 50%; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); box-shadow: ; content: ""; position: absolute; top: -1%; box-shadow: -1px -28px 0 5px white; right: -35px; }

 <div></div>

您可以使用好位置值一定改善这个版本！ 在任何情况下，你应该几乎从来不使用这个解决方案。在我看来，最好的办法是一个PNG图像或SVG。

工作：

 div { height: 100px; width: 200px; overflow: hidden; position: relative; border: 1px solid black; } div:before { height: 80px; width: 100px; border-radius: 50% / 50%; background-color: red; box-shadow: 40px -9px 0 -20px blue, 42px -20px 0 -10px pink, 50px -25px 0 -8px plum, 37px -95px 0 20px green; content: ""; position: absolute; top: 50%; left: -10px; } div:after { height: 70px; width: 120px; border-radius: 50%; background-color: rgba(255, 215, 0, 0.6); -webkot-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -o-transform: rotate(-35deg); -ms-transform: rotate(-35deg); transform: rotate(-35deg); box-shadow: ; content: ""; position: absolute; top: -1%; box-shadow: -4px -27px 0 5px rgba(0, 255, 215, 0.6); right: -44px; }