Psychotik

solucionando marrones desde 2003

Crear esquinas dobladas con “border”, fácilmente

Pertenece a  Tips  el 2 diciembre
Esquinas dobladas con css

Si con border-radius conseguimos de la manera más sencilla generar bordes curvos, con la propiedad border a secas, podemos generar esquinas dobladas con un efecto similar al de doblar una esquina de un papel. Es un tip muy sencillo, solo tenemos que decirle al borde que dos esquinas queremos que no tengan color, ayudándonos de los pseudo-elementos :after y :before lo tenemos hecho:

Código CSS:

.esquina{
   display:block;
   max-width:320px;
   margin:0px auto;
   padding:40px 50px;
   position:relative;
   background:#fff;
   overflow:hidden;
}
.esquina:after{
   content:””;
   position:absolute;
   bottom:0px;
   left:0px;
   display:block;
   width:0px;
   /* Le damos un color a cada esquina, que sea sólido y el tamaño de cada borde dependiendo de la posición que le queramos dar, siendo 0px las esquinas que no queremos que se vean, en este caso para la esquina inferior izquierda */
   border-color: #ccc #ccc #EAEAEA #EAEAEA;
   border-style: solid;
   border-width: 40px 0px 0px 40px;
   box-shadow:0px 2px 2px #;
}
   .esquina:hover:after{
      border-width: 80px 0px 0px 80px;
   }
/* Y con esto vamos a generar una segunda esquina que nos haga de sombra, la colocamos a su derecha y con una ligera transparencia */
.esquina:before{
   content:””;
   position:absolute;
   bottom:0px;
   left:40px;
   display:block;
   width:0px;
   border-color: transparent transparent #ccc #ccc;
   border-style: solid;
   border-width: 0px 20px 40px 0px;
   opacity:0.5;
}
   .esquina:hover:before{
      left:80px;
      border-width: 80px 0px 0px 120px;
   }

Resultado:

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pellentesque, mi eu mattis auctor, lorem velit ultricies urna, id fermentum urna nibh ac risus. Nam sed erat. Pellentesque id ante sit amet nulla feugiat dignissim.

A partir de aquí voláis libres pajarillos, cambiad los valores para generar la esquina en la posición que más os convenga, transiciones, sombras… ¡a darle fantasía! :D

¡Ah! recordad reducir y simplificar los estilos duplicados, lo pongo todo para que los menos experimentados vean como funciona.


Volver atrás

Una respuesta a “Crear esquinas dobladas con “border”, fácilmente”

  1. diseño web panama dice:

    muy buen ejemplo, más fácil imposible de explicar…saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »