Question 318153 in Html Question posted in
Some basic documentation can be found here.

Html – 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);
}
Tags:

2

Answers


  1. 0

    Try to use mask-image property: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

    You can use an svg image with it and get the exact shape you need.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search