Autor Tema: Duda - Laterales curvos  (Leído 1064 veces)

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Duda - Laterales curvos
« 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.
Twitter: @JoakoM010



Comunidad PHPeros

Duda - Laterales curvos
« en: 17 de Julio de 2012, 04:50:53 am »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Duda - Laterales curvos
« Respuesta #1 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%;

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Duda - Laterales curvos
« Respuesta #2 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:
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Duda - Laterales curvos
« Respuesta #3 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?  ???

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Duda - Laterales curvos
« Respuesta #4 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.
« Última modificación: 17 de Julio de 2012, 18:19:59 pm por SoyJoaquin. »
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Duda - Laterales curvos
« Respuesta #5 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?

Desconectado SoyJoaquin.

  • PHPero Master
  • ******
  • Mensajes: 2.737
  • Karma: 131
  • Sexo: Masculino
  • ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ส้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้้ Problem?
    • Ver Perfil
    • IsoMap
Re:Duda - Laterales curvos
« Respuesta #6 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...
Twitter: @JoakoM010



Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Duda - Laterales curvos
« Respuesta #7 en: 17 de Julio de 2012, 19:59:53 pm »
Usando transform de CSS3 puedes usar rotate...
Podrías probar así