I am trying to display an li element as a wave. I don't want to use any background images but the border-radius doesn't support negative values. I hope you can help me.
Let's try . 8 for example. --size: 50px; --R: calc(var(--size) * 1.28); mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%, radial-gradient(var(--R) at 50% calc(-.
How to Create Wave Background using CSS ? CSS code: In this section, we will use some CSS property to design the wave background. First we will add a basic background to the section and then use the before selector to set the wave png file on top of our background.
In CSS, the symbol tilde(~) is know as Subsequent-sibling Combinator (also known as tilde or squiggle or twiddle or general-sibling selector). As the name suggests it is made of the “tilde” (U+007E, ~) character that separates two sequences of simple selectors.
These waves can be used in designing the background of the landing pages, Images, responsive buttons, products, and areas of the web pages with the help of CSS and HTML. There can either be a static wave or an animated wave referring to preferences. Waves can be created in two ways: using ::before and ::after selector.
The closest I can get is this using only css.
.one {
position: absolute;
top: 22px;
left: 19px;
width: 230px;
height: 180px;
background: #0F1E3C;
border-radius: 100%;
clip: rect(70px, auto, auto, 45px);
transform:rotate(90deg);
}
.one:before {
content: '';
position: absolute;
top: -15px;
left: -62px;
width: 200px;
height: 200px;
background: white;
border-radius: 100%;
}
.two {
position: absolute;
top: 156px;
left: 59px;
width: 230px;
height: 180px;
background: #0F1E3C;
border-radius: 100%;
clip: rect(70px, auto, auto, 45px);
transform:rotate(-90deg);
}
.two:before {
content: '';
position: absolute;
top: -15px;
left: -62px;
width: 200px;
height: 200px;
background: white;
border-radius: 100%;
}
<div class="one"></div>
<div class="two"></div>
Whilst SVG would be a much better option here, you could use a border-like hack to create the basis of this shape.
Here is a basic example for this kind of shape, although I will say there is a lot of room for improvement:
div {
position:relative;
height:100px;
width:100px;
background:lightgray;
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>
A Quick SVG version:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="407pt" height="126pt" viewBox="0 0 407 126">
<g transform="translate(0,126) scale(0.1,-0.1)" fill="#000000" stroke="none">
<path d="M43 1223 c-4 -21 -8 -119 -7 -218 0 -169 2 -185 28 -265 153 -466
545 -728 1030 -689 276 23 694 112 1116 239 175 53 375 99 501 116 149 19 363
15 453 -10 134 -37 273 -132 351 -241 26 -36 42 -51 46 -42 4 7 13 58 20 115
29 239 -44 492 -201 700 -99 132 -238 236 -405 303 l-76 30 -417 -3 -417 -4
-190 -37 c-104 -21 -275 -58 -380 -82 -316 -73 -466 -96 -678 -102 -124 -4
-218 -2 -280 7 -175 23 -341 91 -437 177 l-49 44 -8 -38z" />
</g>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With