Bom dia, gostaria de saber se é possivel e como fazer para criar uma div
com essa curva em U para cima e para baixo usando apenas css
, tentei de várias maneiras e não consegui.
Obrigado.
Recomendo sempre que fizer uma pergunta aqui, por algum código, ou exemplo visual com código no http://jsfiddle.net/ por exemplo. É interessante mostrar algum esforço.
Minha solução é essa DEMO:
Html:
<div class="wrapper">
<div class="curve curve-top">
</div>
<div class="curve curve-bottom">
</div>
</div>
Css:
div.wrapper {
background-color:black;
width:500px;
}
div.curve {
background-color:white;
width:500px;
height:150px;
}
div.curve-top{
border-bottom-left-radius:70%;
border-bottom-right-radius:70%;
}
div.curve-bottom {
margin-top: 50px;
border-top-left-radius:70%;
border-top-right-radius:70%;
}