Currently, I am trying to create a unique 'wavy ghostly bottom' shape that features two double curves:
While the lower portion of this illustration captures it more effectively.
My Code
My latest attempt at generating this shape involved using pseudo-elements and overflow: hidden, but it restricts the use of gradient backgrounds (as a solid color background is required):
Attempt 1 - Using Pseudo Elements with overflow hidden
.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;
}
/* Rest of CSS code */
Attempt 2 - Using Pseudo Elements with 's' shape
.bottom {
background: lightgray;
/* Rest of CSS code */
}Attempt 3 - extra elements and box shadows
I experimented with adding box shadows and extra elements as well, but couldn't quite achieve the desired result:
.bottom {
height: 300px;
width: 300px;
position: relative;
overflow: hidden;
}
/* Rest of CSS code */
None of these methods seem to provide an easy way to create the double curved shape without requiring a solid colored background.
Note: I prefer not to use SVG as I have completed most of the overall shape using pure CSS, so I'd like to finish this without an SVG element.
The inner shape will have a solid color, and the border is not crucial in my design.
Here is where I want to implement it
Update