Wavy Border CSS

Asked Nov 03 '17 at 13:57

Active Nov 03 '17 at 14:03

Viewed 410 times

I'm trying to figure out how to make a wavy border like this image:

div {
  position:relative;
  height:100px;
  width:100px;
  background:transparent;
  overflow:hidden;
}

div:before {
  content:"";
  position:absolute;
  top:calc(-100% - 25px);
  left:00%;
  height:200%;
  width:200%;
  border-radius:50%;
  background:cornflowerblue;
  border-bottom:50px solid blue;
}
div:nth-child(2) {
  transform:rotate(180deg);
  margin-left:40px;
  margin-top:-25px;
}

<div></div>
<div></div>

I've got this example above, however I want a better way of doing it. This example is very very messy way of doing it.

I have thought of doing it with an image but then I can't change the colour with CSS every time I want to change the colour scheme.

Anyone got any ideas?

I do not want to use oval shapes to make the waves, as it's not neat.

edited Nov 03 '17 at 14:03

asked Nov 03 '17 at 13:57

YaBCK

2,949
4
32
61

8

If you use an SVG file for your image, you can still change it's color with CSS. – Brian Glaz Nov 03 '17 at 13:58
@BrianGlaz Any examples? – YaBCK Nov 03 '17 at 14:00
https://stackoverflow.com/questions/37301702/fill-a-div-with-a-wavy-border-svg-path – Brandon Nov 03 '17 at 14:01
https://codepen.io/yoksel/pen/GjgYgj – Christoph Nov 03 '17 at 14:01
@MohammadUsman - Please read my bold text in Question – YaBCK Nov 03 '17 at 14:03
In my opinion, you will need `SVG` for this. And a similar answer is already there on the duplicate that I've linked. – Mohammad Usman Nov 03 '17 at 14:04

Wavy Border CSS

0 Answers0