tabla redondear redondeados redondeado redondeadas redondeada radius marco imagen esquinas bordes css css3 rounded-corners css-shapes

css - redondear - redondeado de esquinas



Lado redondeado, esquinas no redondeadas (3)

Aquí está el jsfiddle: http://jsfiddle.net/swqZL/

CSS para el elemento div con clase "figura":

.figure { height: 400px; width: 200px; background-color: black; border-bottom-left-radius: 100%30px; border-bottom-right-radius: 100%30px; }

Radio horizontal 100%, radio vertical 30px

Me gustaría crear una forma como la que se muestra a continuación completamente en CSS. Como puede ver, tomaría un poco más de ajustes que simplemente aplicar esquinas redondeadas ...

Se puede hacer?


Fragmento de trabajo:

.border-radius-example { width: 125px; height: 175px; background: #000; margin: 20px; float: left; padding: 5px; } #border-radius-bottom { -moz-border-radius-bottomleft: 100%35px; -webkit-border-bottom-left-radius: 100%35px; border-bottom-left-radius: 100%35px; -moz-border-radius-bottomright: 100%35px; -webkit-border-bottom-right-radius: 100%35px; border-bottom-right-radius: 100%35px; }

<div class=''border-radius-example'' id=''border-radius-bottom''> </div>


<div style="background: black; width: 300px; height: 450px; padding-top: 50px;"> <div style="width: 200px; height: 400px; background: white; margin: 0 auto; border-radius: 0 0 100px 100px / 0 0 25px 25px; -moz-border-radius: 0 0 100px 100px / 0 0 25px 25px; -webkit-border-radius: 0 0 100px 100px / 0 0 25px 25px; "> </div> </div>

La información sobre los radios ovales selectivos se encuentra aquí: http://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/