Search code examples
htmlcsssass

How can I make a rounded wave border like in the picture using css?

The right side of the image is the problem, I can't make the border a wave like it. I want it to curve but not symmetrically.

Wave border example

This is the closest I got using (https://css-generators.com/wavy-shapes/):

Wave border wrong

.box {
  --mask:
    radial-gradient(223.61px at calc(100% - 300.00px) 50%,#000 99%,#0000 101%) 0 calc(50% - 200px)/100% 400px,
    radial-gradient(223.61px at calc(100% + 200.00px) 50%,#0000 99%,#000 101%) calc(100% - 100px) 50%/100% 400px repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
Solution

  • Extending on from mfrac's answer, yes you can do it as suggested and still make it mobile responsive as well. Below is a badly cut version of the image, but it could be a png instead of an svg if you like.

    https://codepen.io/Luke-Johns-lukeybytes/pen/mdorwbp

    img {
  border-radius: 4em 0 0 4em;
  -webkit-mask-position: left;
  mask-position: left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -o-object-fit: contain;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  height: 100%;
  width: 100%;
  mask-image: url("https://i.imgur.com/rpQx3lV.png");
}

    In my experience, I have found svg's can be a little bit more buggy, not to say you couldn't use one though. As long as the png or svg has black with the transparent bit you want to trim off the image, it should work fine.