Double curved shape
Solution 1:
Considering :
- the amount of code needed
- the hassle of aligning double curves
CSS doesn't seem to be the way to go here and SVG way more appropriate. To illustrate, see these two snippets :
SVG
DEMO
/*** 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 (consider I only made one double curve on the right side of the shape)
.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>Note that I didn't list out the advantages of using an svg in this case (responsiveness, quality of output, curve control, border, border color/opacity, fill colour/opacity, transparency, maintainability, amount of time to build the shape...)
Solution 2:
You should use boxshadows and overflows to make that shape.
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>You can certainly improve this version using good position values! In any case, you should almost never use this solution. the best option in my opinion would be a png image or SVG.
Working:
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;
}<div></div>