Comunidad PHPeros

Lenguajes => CSS => Mensaje iniciado por: SoyJoaquin. en 17 de Julio de 2012, 04:50:53 am

Título: Duda - Laterales curvos
Publicado por: SoyJoaquin. en 17 de Julio de 2012, 04:50:53 am
Me preguntaba si existía alguna manera de hacer que los bordes laterales de un div (arriba, abajo, derecha e izquierda) fueran curvos ya sea especificando un radio en concreto.

Esto se debe a que últimamente me esta gustando hacer diseños al 100% del tamaño del documento y quisiera no ser tan estricto utilizando únicamente lineas perpendiculares...

Nota: Hablo de los laterales, no de las esquinas. No me sirve el uso de imágenes, quisiera buscarle alguna solución mediante código.

Saludos.
Título: Re:Duda - Laterales curvos
Publicado por: westwest en 17 de Julio de 2012, 14:22:03 pm
Tal vez puedas usar border-radius, ajustando de manera que ocupe todo el lateral (50%), de la misma manera que se hacen circulos, pero alterándolo para que no quede redondo:  border-top-left-radius: 50% 25%;
Título: Re:Duda - Laterales curvos
Publicado por: SoyJoaquin. en 17 de Julio de 2012, 15:53:31 pm
Tal vez puedas usar border-radius, ajustando de manera que ocupe todo el lateral (50%), de la misma manera que se hacen circulos, pero alterándolo para que no quede redondo:  border-top-left-radius: 50% 25%;
...Y que se supone que hago con el color de fondo?  :confused:
Título: Re:Duda - Laterales curvos
Publicado por: westwest en 17 de Julio de 2012, 18:04:44 pm
...Y que se supone que hago con el color de fondo?  :confused:
Y qué tiene que ver?  ???
Título: Re:Duda - Laterales curvos
Publicado por: SoyJoaquin. en 17 de Julio de 2012, 18:11:40 pm
Y qué tiene que ver?  ???

Ya se me ocurrió algo.
Lo del fondo lo decía en caso de que tenga una imagen por debajo y que el color de la barra que quiero curvar fuera un degradado.

Saludos.

Edito: No, la duda del fondo sigue xD
Veras, por ejemplo:
Código: [Seleccionar]
<style>
body {
margin: 0;
background-color: orange;
}
div {
width: 100%;
height: 200px;
border-bottom-left-radius: 50% 70%;
border-bottom-right-radius: 50% 70%;
background-color: black;
}
</style>
<div></div>

Que la barra negra de arriba se pudiera repetir abajo siguiendo esa misma curva pero abajo (Que no sea el sentido contrario, que mantenga la misma curva en dirección hacia abajo)

Tomando en cuenta que tengo una imagen de fondo (en el body).
A eso me refería con el "fondo" xD

Saludos.
Título: Re:Duda - Laterales curvos
Publicado por: westwest en 17 de Julio de 2012, 18:36:21 pm
Podrías ponerle el fondo al borde, y así se alteraría...

Y ahora que lo pienso, css no permite ahora alterar divs? rotate y demás? o es sólo para transiciones?
Título: Re:Duda - Laterales curvos
Publicado por: SoyJoaquin. en 17 de Julio de 2012, 19:02:39 pm
Podrías ponerle el fondo al borde, y así se alteraría...

Y ahora que lo pienso, css no permite ahora alterar divs? rotate y demás? o es sólo para transiciones?

Usando transform de CSS3 puedes usar rotate...
Título: Re:Duda - Laterales curvos
Publicado por: westwest en 17 de Julio de 2012, 19:59:53 pm
Usando transform de CSS3 puedes usar rotate...
Podrías probar así