Wavy shape with css

Question

I m trying to recreate this image with CSS     I would not need it to repeat  This is what I started but it just has a straight line    x000D   x000D   wave   x000D    position  absolute  x000D    height  70px  x000D    width  600px  x000D    background   e0efe3  x000D    x000D   lt div id  wave  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Recently an awesome tool called Get Waves was introduced where you can simply from UI create your own waves and then export this to SVG format. This is as simple as going to the https://getwaves.io/ website and enjoying it!

Edit:

Recently I've discovered also a new tool - https://shapedivider.app/

User · Answer

My implementation uses the svg element in html and I also made a generator for making the wave you want   https   smooth ie blogs news svg-wavey-transitions-between-sections   lt div style  height  150px  overflow  hidden   gt     lt svg viewBox  0 0 500 150  preserveAspectRatio  none  style  height  100   width  100    gt       lt path d  M0 00 92 27 C216 83 192 92 304 30 8 39 500 00 109 03 L500 00 0 00 L0 00 0 00 Z  style  stroke  none fill   e1efe3   gt  lt  path gt     lt  svg gt   lt  div gt    https   jsfiddle net 1b8L7nax 5

User · Answer

My pure CSS implementation based on above with 100  width  Hope it helps    x000D   x000D   wave-container   x000D    width  100   x000D    height  100px  x000D    overflow  hidden  x000D    x000D   x000D   wave   x000D    display  block  x000D    position  relative  x000D    height  40px  x000D    background  black  x000D    x000D   x000D   wave before   x000D    content      x000D    display  block  x000D    position  absolute  x000D    border-radius  100   x000D    width  100   x000D    height  300px  x000D    background-color  white  x000D    right  -25   x000D    top  20px x000D    x000D   x000D   wave after   x000D    content      x000D    display  block  x000D    position  absolute  x000D    border-radius  100   x000D    width  100   x000D    height  300px  x000D    background-color  black  x000D    left  -25   x000D    top  -240px  x000D    x000D   lt div id  wave-container  gt  x000D     lt div id  wave  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s another way to do it     The concept is to create a clip-path polygon with the wave as one side     This approach is fairly flexible   You can change the position  left  right  top or bottom  in which the wave appears  change the wave function to any function t  which maps to  0 1     The polygon can also be used for shape-outside  which lets text flow around the wave when in  left  or  right  orientation   At the end  an example you can uncomment which demonstrates animating the wave    x000D   x000D    x000D   x000D  function PolyCalc f   a function t   from  0  infinity    gt   0  1      x000D                    s    a slice function y  i  from y  0 1    gt   0  1   with slice index  i  in  0  n    x000D           w   window size in seconds    x000D                    n   sample size    x000D                    o   orientation   gt  left right top bottom - the  flat edge  of the polygon    x000D                       x000D    x000D   this polyStart    polygon    x000D    this polyLeft   this polyStart    0  0        starts in the top left corner x000D    this polyRight   this polyStart    100  0        starts in the top right corner x000D    this polyTop   this polyStart    0  0         starts in the top left corner x000D    this polyBottom   this polyStart    0  100       starts in the bottom left corner x000D     x000D    var self   this  x000D    self mapFunc   s  x000D    this func   f  x000D    this window   w  x000D    this count   n  x000D    var dt   w n    x000D   x000D    switch o    x000D      case  top   x000D        this poly   this polyTop  break  x000D      case  bottom   x000D        this poly   this polyBottom  break  x000D     case  right   x000D       this poly   this polyRight  break  x000D     case  left   x000D     default  x000D      this poly   this polyLeft  break  x000D        x000D       x000D    this CalcPolygon   function t    x000D     var p   this poly  x000D      for  i   0  i  lt  this count  i      x000D        x   100   i  this count-1 0   x000D        y   this func t   i dt   x000D        if  typeof self mapFunc      undefined   x000D         y self mapFunc y  i   x000D        y  100  x000D        switch o    x000D          case  top    x000D            p    x          y          break  x000D          case  bottom   x000D            p    x           100-y           break  x000D         case  right   x000D           p     100-y           x          break  x000D         case  left   x000D          default  x000D           p    y          x          break            x000D          x000D        x000D       x000D      switch o     x000D        case  top   x000D          p     100  0     break  x000D        case  bottom   x000D          p     100  100     x000D          break  x000D       case  right   x000D         p     100  100     break  x000D       case  left   x000D        default  x000D         p     0  100     break  x000D        x000D       x000D      return p  x000D      x000D     x000D   x000D  var text   document querySelector   text    x000D  var divs   document querySelectorAll   wave    x000D  var freq 2 Math PI    angular frequency in radians sec x000D  var windowWidth   1    the time domain window which determines the range from  t  t windowWidth  that will be evaluated to create the polygon x000D  var sampleSize   60  x000D  divs forEach function wave    x000D    var loc   wave classList 1   x000D   x000D    var polyCalc   new PolyCalc  x000D     function t      The time domain wave function x000D       return  Math sin freq   t    1  2    sine is  -1  -1   so we remap to  0 1  x000D         x000D      function y  i      slice function  takes the time domain result and the slice index and returns a new value in  0  1    x000D        return MapRange y  0 0  1 0  0 65  1 0      Here we adjust the range of the wave to  flatten  it out a bit   We don t use the index in this case  since it is irrelevant x000D         x000D      windowWidth    1 second  which with an angular frequency of 2pi rads sec will produce one full period  x000D      sampleSize    the number of samples to make  the larger the number  the smoother the curve  but the more pionts in the final polygon x000D      loc   the location x000D       x000D     x000D      var polyText   polyCalc CalcPolygon 0   x000D      wave style clipPath   polyText  x000D      wave style shapeOutside   polyText  x000D      wave addEventListener  click  function e   document querySelector   polygon   innerText   polyText     x000D        x000D   x000D  function MapRange value  min  max  newMin  newMax    x000D    return value    newMax - newMin   max-min    newMin  x000D    x000D   x000D    Animation - animate the wave by uncommenting this section x000D    Also demonstrates a slice function which uses the index of the slice to alter the output for a dampening effect  x000D     x000D  var t   0  x000D  var speed   1 180  x000D   x000D  var polyTop   document querySelector   top    x000D   x000D  var polyTopCalc   new PolyCalc  x000D     function t    x000D       return  Math sin freq   t    1  2  x000D         x000D      function y  i           x000D        return MapRange y  0 0  1 0   sampleSize-i  sampleSize  1 0   x000D         x000D      windowWidth  sampleSize   top  x000D       x000D   x000D  function animate     x000D    var polyT   polyTopCalc CalcPolygon t       x000D      t   speed  x000D      polyTop style clipPath   polyT      x000D      requestAnimationFrame animate   x000D    x000D   x000D  requestAnimationFrame animate   x000D     x000D  div div   x000D    padding 10px  x000D      overflow scroll    x000D    x000D   x000D   left   x000D    height 100   x000D    width 35   x000D    float left  x000D    x000D   x000D   right   x000D    height 200px  x000D    width 35   x000D    float right  x000D    x000D   x000D   top    x000D    width 100   x000D    height  200px    x000D    x000D   x000D   bottom   x000D    width 100   x000D    height 200px  x000D    x000D   x000D   green   x000D    background linear-gradient to bottom   b4ddb4 0   83c783 17   52b152 33   008a00 67   005700 83   002400 100     x000D     x000D   x000D   mainContainer   x000D    width 100   x000D    float left  x000D    x000D   x000D   polygon   x000D    padding-left 20px  x000D    margin-left 20px  x000D    width 100   x000D    x000D   lt div class  mainContainer  gt  x000D   x000D     lt div class  wave top green  gt  x000D      Click to see the polygon CSS x000D     lt  div gt  x000D     x000D     lt  --div class  wave left green  gt  x000D     lt  div-- gt  x000D     lt  --div class  wave right green  gt  x000D     lt  div-- gt    x000D     lt  --div class  wave bottom green  gt  lt  div-- gt    x000D   lt  div gt  x000D   lt div id  polygon  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I m not sure it s your shape but it s close - you can play with the values   https   jsfiddle net 7fjSc 9    x000D   x000D   wave   x000D    position  relative  x000D    height  70px  x000D    width  600px  x000D    background   e0efe3  x000D    x000D   wave before   x000D    content      x000D    display  block  x000D    position  absolute  x000D    border-radius  100  50   x000D    width  340px  x000D    height  80px  x000D    background-color  white  x000D    right  -5px  x000D    top  40px  x000D    x000D   wave after   x000D    content      x000D    display  block  x000D    position  absolute  x000D    border-radius  100  50   x000D    width  300px  x000D    height  70px  x000D    background-color   e0efe3  x000D    left  0  x000D    top  27px  x000D    x000D   lt div id  wave  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I like ThomasA s answer  but wanted a more realistic context with the wave being used to separate two divs  So I created a more complete demo where the separator SVG gets positioned perfectly between the two divs     Now I thought it would be cool to take it further  What if we could do this all in CSS without the need for the inline SVG  The point being to avoid extra markup  Here s how I did it   Two simple  lt div gt     x000D   x000D      CSS using pseudo-elements      x000D   x000D   A   x000D    background   0074D9  x000D    x000D   x000D   B   x000D    background   7FDBFF  x000D    x000D   x000D   A  after   x000D    content      x000D    position  relative  x000D    left  -3rem  x000D       padding   -1    x000D    top  calc  3rem - 4rem   2   x000D       padding - height 2    x000D    float  left  x000D    display  block  x000D    height  4rem  x000D    width  100vw  x000D    background  hsla 0  0   100   0 5   x000D    background-image  url  data image svg xml  3Csvg xmlns  http   www w3 org 2000 svg  viewBox  0 70 500 60  preserveAspectRatio  none  3E 3Crect x  0  y  0  width  500  height  500  style  stroke  none  fill   237FDBFF     3E 3Cpath d  M0 100 C150 200 350 0 500 100 L500 00 L0 0 Z  style  stroke  none  fill   230074D9   3E 3C path 3E 3C svg 3E    x000D    background-size  100  100   x000D    x000D   x000D   x000D      Cosmetics     x000D   x000D      x000D    margin  0  x000D    x000D   x000D   A  x000D   B   x000D    padding  3rem  x000D    x000D   x000D  div   x000D    font-family  monospace  x000D    font-size  1 2rem  x000D    line-height  1 2  x000D    x000D   x000D   A   x000D    color  white  x000D    x000D   lt div id  A  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Vivamus nec quam tincidunt  iaculis mi non  hendrerit felis  Nulla pretium lectus et arcu tempus  quis luctus ex imperdiet  In facilisis nulla suscipit ornare finibus      x000D   lt  div gt  x000D   x000D   lt div id  B  class  wavy  gt     In iaculis fermentum lacus vel porttitor  Vestibulum congue elementum neque eget feugiat  Donec suscipit diam ligula  aliquam consequat tellus sagittis porttitor  Sed sodales leo nisl  ut consequat est ornare eleifend  Cras et semper mi  in porta nunc  lt  div gt  x000D   x000D   x000D    Demo Wavy divider  with CSS pseudo-elements to avoid extra markup   It was a bit trickier to position than with an inline SVG but works just as well   Could use CSS custom properties or pre-processor variables to keep the height and padding easy to read    To edit the colors  you need to edit the URL-encoded SVG itself   Pay attention  like in the first demo  to a change in the viewBox to get rid of unwanted spaces in the SVG   Another option would be to draw a different SVG    Another thing to pay attention to here is the background-size set to 100  100  to get it to stretch in both directions

User · Answer

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    x000D   x000D  svg   x000D    display  inline-block  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    x000D   container   x000D    display  inline-block  x000D    position  relative  x000D    width  100   x000D    padding-bottom  100   x000D    vertical-align  middle  x000D    overflow  hidden  x000D    x000D   lt div class  container  gt  x000D     lt svg viewBox  0 0 500 500  preserveAspectRatio  xMinYMin meet  gt  x000D       lt path d  M0 100 C150 200 350 0 500 100 L500 00 L0 0 Z  style  stroke  none  fill red   gt  lt  path gt  x000D     lt  svg gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Wavy shape with css

Examples related to css

Examples related to css-shapes