Wavy shape with css

by

I think this is the right way to make a shape like you want. By using the SVG possibilities, and an container to keep the shape responsive.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}
<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>

More Related Contents:

  1. How do CSS triangles work?
  2. Line before and after title over image [duplicate]
  3. Transparent text cut out of background
  4. Border-radius in percentage (%) and pixels (px) or em
  5. CSS triangle custom border color
  6. CSS Only Pie Chart – How to add spacing/padding between slices?
  7. Control the dashed border stroke length and distance between strokes
  8. How to make 3-corner-rounded triangle in CSS
  9. CSS transparent curved shape with two rounded sides
  10. How to draw a circle with text in the middle?
  11. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  12. Is it possible to create an angled corner in CSS?
  13. How to draw a circle sector in CSS?
  14. draw diagonal lines in div background with CSS
  15. Outlining and partially filling an SVG Shape
  16. Hexagon shape with CSS3
  17. Is a concave border radius possible?
  18. Align text on slanted line
  19. background image, linear gradient jagged edged result needs to be smooth edged
  20. Circle with two borders
  21. Blocky gradient effect in CSS3
  22. Border within border CSS
  23. Half hexagon shape with one element
  24. How to create a radial menu in CSS?
  25. Arrow Box with CSS
  26. Transparent hollow or cut out shape in HTML
  27. Make CSS3 triangle with linear gradient
  28. Rounded side, not rounded corners
  29. Making jagged triangle border in CSS
  30. How to create fluid trapezoid image with css?

Leave a Comment