Как создать форму волны с помощью css

Я пытаюсь отобразить элемент li как волну. Я не хочу использовать какие-либо фоновые изображения, но радиус границы не поддерживает отрицательные значения. Я надеюсь, что вы можете мне помочь.Как создать форму волны с помощью css

источник

2015-08-10 CREA Nico Wehmöller

Что еще вы пробовали? Не могли бы вы разместить пример кода? – evolutionxbox

Я сомневаюсь, что вы можете создавать случайные гладкие кривые с CSS, я думаю, что без SVG это невозможно – Andrey

Посмотрите на [эту тему] (http://stackoverflow.com/questions/27777470/wave-or-shape- с-border-on-css3/27780572 # 27780572) и попробуйте варианты, упомянутые здесь. – Harry

Ближайший я могу получить это только с помощью 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>

источник

2015-08-10 10:08:30 Suresh

Хорошая попытка помощника (хотя я по-прежнему рекомендую использовать SVG) :) – Harry

лет, но я только что попробовал, это может быть полезно для кого-то, кто может использовать svgs – Suresh

Ничего страшного, абсолютно ничего. Я люблю CSS Shapes :) – Harry

Хотя SVG будет гораздо лучший вариант здесь, вы можете использовать бордюрный подобный хак, чтобы создать основу этой формы.

Вот простой пример для такого рода формы, хотя я скажу что есть много возможностей для улучшения:

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>

Быстрый вариант 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>

источник

2015-08-10 13:16:33 jbutler483

Голосовать за SVG и особенно голосовать за JB, используя SVG: D – Harry

«голосовать за», он баллотируется на пост президента? – Persijn

Как создать форму волны с помощью css

ответ

Смежные вопросы