I am trying to figure out how to make a wavy border this way:
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>
Run codeHide resultI have this example above, however I want to do it better. This example is a very very dirty way to do this.
I thought about this with an image, but then I can’t change the color with CSS every time I want to change the color scheme.
Does anyone have any ideas?
I do not want to use oval shapes to create waves, as this is not neat.
source
share