Cách tạo hình dạng sóng bằng cách sử dụng css

Question

Tôi đang cố gắng hiển thị phần tử li dạng sóng. Tôi không muốn sử dụng bất kỳ hình nền nào nhưng bán kính đường viền không hỗ trợ giá trị âm. Tôi hy vọng bạn có thể giúp tôi.

Answer 1

Gần nhất tôi có thể nhận được này chỉ sử dụng 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>

Answer 2

Trong khi SVG sẽ là một lựa chọn nhiều tốt hơn ở đây, bạn có thể sử dụng một hack cửa như để tạo cơ sở hình này.

Dưới đây là một ví dụ cơ bản cho loại hình dạng, mặc dù tôi sẽ nói rằng có rất nhiều phòng để cải thiện:

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>

---

Một phiên bản SVG nhanh:

<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>