Double curved shape

by

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…)

More Related Contents:

  1. Transparent arrow/triangle indented over an image
  2. Transparent text cut out of background
  3. Invert rounded corner in CSS?
  4. Transparent hollow or cut out circle
  5. CSS transparent curved shape with two rounded sides
  6. Wave (or shape?) with border on CSS3
  7. Triangle shape with background image
  8. How to create a curve on the top of a background?
  9. Outlining and partially filling an SVG Shape
  10. Filling water animation
  11. Transparent hollow or cut out shape in HTML
  12. How do CSS triangles work?
  13. Line before and after title over image [duplicate]
  14. SVG data image not working as a background-image in a pseudo element
  15. CSS Only Pie Chart – How to add spacing/padding between slices?
  16. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  17. Control the dashed border stroke length and distance between strokes
  18. How to draw a circle with text in the middle?
  19. Is there a way to use SVG as content in a pseudo element ::before or ::after
  20. Circular percent progress bar
  21. draw diagonal lines in div background with CSS
  22. Is a concave border radius possible?
  23. Can I change the fill color of an svg path with CSS?
  24. How to make a element expand or contract to its parent container?
  25. Circle with two borders
  26. Background-size with SVG squished in IE9-10
  27. How to Include CSS style when converting svg to png
  28. 3d transforms on SVG element
  29. CSS change d property of
  30. Creating a droplet like border effect in css

Leave a Comment