Ich versuche, ein li-Element als eine Welle anzuzeigen. Ich möchte keine Hintergrundbilder verwenden, aber der Rahmenradius unterstützt keine negativen Werte. Ich hoffe ihr könnt mir helfen.So erstellen Sie eine Wellenform mit CSS
Der nächstgelegene ich bekommen kann, ist dies nur mit 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>Während SVG hier eine viel bessere Option wäre, können Sie eine Grenze ähnlichen Hack verwenden, könnte die Grundlage dieser Form zu erstellen.
Hier ist ein einfaches Beispiel für diese Art von Form, obwohl ich eine Menge Raum für Verbesserungen gibt es sagen:
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>
Was haben Sie noch versucht? Könnten Sie einen Beispielcode posten? – evolutionxbox
Ich bin zweifelhaft, dass Sie zufällige glatte Kurven mit CSS erstellen können, ich denke, ohne SVG ist es nicht möglich – Andrey
Werfen Sie einen Blick auf [this thread] (http://stackoverflow.com/questions/27777470/wave-or-shape- mit-border-on-css3/27780572 # 27780572) und versuchen Sie die dort genannten Optionen. – Harry