Sto provando a visualizzare un elemento li come un'onda. Non voglio usare alcuna immagine di sfondo, ma il raggio del bordo non supporta valori negativi. Spero che puoi aiutarmi.Come creare una forma d'onda usando css
6
A
risposta
5
Il più vicino che può ottenere è questo utilizzando solo i 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>
2
Mentre SVG sarebbe un molto scelta migliore qui, si potrebbe usare un hack confine simile per creare la base di questa forma.
Ecco un esempio di base per questo tipo di forma, anche se devo dire che c'è un sacco di spazio per migliorare:
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>
Una versione in formato SVG rapida:
<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>
Problemi correlati
- 1. Creare una forma di croce in CSS
- 2. Come creare una forma arrotondata di Chevron
- 3. come creare questo forma con solo div e css
- 4. Come creare una forma semi trasparente?
- 5. Creare una forma in C++
- 6. Creare un bordo a forma di L usando HTML e CSS, è possibile?
- 7. È possibile creare una finestra trasparente usando HTML/JS/CSS?
- 8. Come creare una pagina master usando HTML?
- 9. Come creare una finestra a forma di ellisse con VC++ usando l'API win32
- 10. Come creare un layout orizzontale reattivo usando i CSS?
- 11. Come posso creare un layout di bordo usando css?
- 12. Come posso creare un Floating Button usando jQuery e CSS?
- 13. Come creare uno sfondo circolare usando i CSS?
- 14. Come creare un bordo trasparente usando i CSS?
- 15. Come creare una forma ad anello disegnabile in Android?
- 16. Come posso creare una forma di pulsante complessa?
- 17. Come creare una forma esagonale in formato .xml
- 18. come creare forme concave/convesse css
- 19. Twitter Bootstrap CSS forma statica fluido posizionamento
- 20. L'ombra della casella CSS attorno a una forma personalizzata?
- 21. Come creare una sottoquery usando Laravel Eloquent?
- 22. Come creare una sessione usando JavaScript?
- 23. Come creare una directory usando nerdtree
- 24. Come creare una directory usando StreamWriter?
- 25. creare un'immagine da css
- 26. Come posso creare una piccola scatola di colori usando html e css?
- 27. Come posso creare una casella di testo senza bordi in Google Chrome usando i CSS?
- 28. Come ruotare un'immagine di una quantità casuale usando CSS?
- 29. Android Forma all'interno di una forma
- 30. Django: creare array di input HTML utilizzando una forma Django
Cos'altro hai provato? Potresti postare qualche codice di esempio? – evolutionxbox
Sono dubbioso che tu possa creare curve lisce casuali con i CSS, penso che senza SVG non sia possibile – Andrey
Dai un'occhiata a [questo thread] (http://stackoverflow.com/questions/27777470/wave-or-shape- with-border-on-css3/27780572 # 27780572) e provare le opzioni menzionate lì. – Harry