Geek Answers Handbook

How to create a waveform using css

I am trying to show the li element as a wave. I do not want to use any background images, but the border radius does not support negative values. I hope you help me.

it is possible in CSS

+6
source share
2 answers

The closest I can get is 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>
+5
source

While SVG would be a better option , you could use a border hack to create the foundation of this form.

Here is a basic example of such a form, although I will say that there are many opportunities 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>

Fast version of SVG:

 <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>
+2
source

More articles:


All Articles