Hacer un div con forma

[chocovo]

Hola,

Necesito crear un div con una forma determinada para poder poner contenido en su interior pero en todas partes lo que veo es que utilizan bordes para hacer toda la forma...

Código:

<style>
#box {
	border-left: 200px solid black;
	border-bottom: 50px solid transparent;
	width: 0;
	height: 100px;
</style>
<div id="box"></div>
}

¿Hay alguna forma para que obtener lo mismo pero con un div "hueco" y borde de 2px?

La forma basicamente sería:
- Partiendo de un rectangulo de 200px de ancho y 100 de alto, hacer que la esquina izquierda-bajo baje 50px.

Gracias y un saludo

[ArturoGallegos]

No entiendo que figura buscas? puedes poner link a una foto que muestre el resultado deseado?

[chocovo]

Hola,

Estoy buscando como hacer divs con esa forma...

Con un borde de 2px y un fondo que pueda ser verde o una imagen cualquiera...

Gracias

[ArturoGallegos]

Solo debes jugar un poco con los estilos y propiedades, no siempre se puede solo con bordes, para tu caso mira este ejemplo que te pongo.



Ignora la pestaña de JS, no se como quitarla

[g3kdigital]

Hola, buenas.

La solución de Arturo Gallegos es una de las tantas soluciones posibles, yo propongo otras 2, porque la solución anterior depende de que el color de fondo sea igual al del borde del pseudo-elemento y si por ejemplo tuvieras un gradiente o una imagen de fondo, no podrías usarla o no se vería igual.

Con esto no quiero decir, que no te funcione o que la de Arturo este mal, solo que puedas ver que con border, no es la única forma de lograr los "bordes-dentados".

Propuesta 1: Skew

Lo malo de esta propuesta es que necesitas que el texto, siempre este en otro elemento html, como un span, porque el seudoelemento al estar con posición absoluta cubre al texto, así que:

Código HTML:

<div id="box1" class="box">
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate, autem a ipsam provident similique alias incidunt fugiat quidem sed non. Omnis voluptatibus neque in. Temporibus ut omnis illum consequuntur?</span>
</div>
 

Y en el css para la caja:

Código CSS:

.box {
  display: inline-block;
  margin: 2px;
  margin-bottom: 70px;
  padding: 10px;
    width: 200px;
  background-color: #f1f1f1;
  position: relative;
  text-align: right;
  /*La magia del borde es con drop-shadow
  *ya que la "sombra" cubre todo el elemento
  * incluyendo al seudoelemento*/
  filter: 
    drop-shadow(0px 2px 0px blue) 
    drop-shadow(2px 0px 0px blue) 
    drop-shadow(-2px 0px 0px blue) 
    drop-shadow(0px -2px 0px blue) ;
}
 

Y el css para el seudolemento:

Código CSS:

.box::after{
  content: '';
  display: block;
  position: absolute;
  /*con inherit, el bloque tendrá siempre el mismo fondo que el padre*/
  background: inherit; 
  width: 100%;
  left: 0;
  top: 100%;
}
 
/*Yo separe esta parte, para no tener que volver
* a usarlo en el ejemplo 2, pero fácilmente 
*pueden ir en un solo estilo.*/
 
/*Este elemento queda encima del texto*/
#box1::after{
  height:55px;
  /*con esto lo obligamos a estar una capa abajo*/
  z-index: 1;
  transform: 
    skewY(15deg)
    translateY(-50%);
}
 
#box1 span{ position: relative; z-index: 2;  }
/*con esto al texto lo mandamos una capa arriba*/
 

Propuesta 2: Clip-Path

Clip-path crea una máscara de forma sobre el elemento y solo hace visible lo que se "conecte" mediante las coordenadas, esto nos sirve muy bien para el siguiente ejemplo, donde no necesitamos el span:

Código HTML:

<div id="box2" class="box">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate, autem a ipsam provident similique alias incidunt fugiat quidem sed non. Omnis voluptatibus neque in. Temporibus ut omnis illum consequuntur?
</div>
 

Y en el css, podemos repetir el css de la caja y del seudoelemento con la clase "box" y solo necesitamos manipular el estilo del pseudo-elemento:

Código CSS:

/*.box y .box::after
* los dejamos tal cual el css ejemplo de arriba
* solo modificamos la caja 2 con el ID #box2
*/
 
#box2::after{
  height: 50px;  
  /*En esta solución el corte lo logramos con mascaras de clip*/
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%
  );  
}
 

Para ver una versión demo en vivo, te anexo el pen: https://codepen.io/g3kdigital/pen/JOpmYG

Prueba a cambiar el color de fondo del body.

[g3kdigital]

Hola, buenas.

La solución de Arturo Gallegos es una de las tantas soluciones posibles, yo propongo otras 2, porque la solución anterior depende de que el color de fondo sea igual al del borde del pseudo-elemento y si por ejemplo tuvieras un gradiente o una imagen de fondo, no podrías usarla o no se vería igual.

Con esto no quiero decir, que no te funcione o que la de Arturo este mal, solo que puedas ver que con border, no es la única forma de lograr los "bordes-dentados".

Propuesta 1: Skew

Lo malo de esta propuesta es que necesitas que el texto, siempre este en otro elemento html, como un span, porque el seudoelemento al estar con posición absoluta cubre al texto, así que:

Código HTML:

<div id="box1" class="box">
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate, autem a ipsam provident similique alias incidunt fugiat quidem sed non. Omnis voluptatibus neque in. Temporibus ut omnis illum consequuntur?</span>
</div>
 

Y en el css para la caja:

Código CSS:

.box {
  display: inline-block;
  margin: 2px;
  margin-bottom: 70px;
  padding: 10px;
    width: 200px;
  background-color: #f1f1f1;
  position: relative;
  text-align: right;
  /*La magia del borde es con drop-shadow
  *ya que la "sombra" cubre todo el elemento
  * incluyendo al seudoelemento*/
  filter: 
    drop-shadow(0px 2px 0px blue) 
    drop-shadow(2px 0px 0px blue) 
    drop-shadow(-2px 0px 0px blue) 
    drop-shadow(0px -2px 0px blue) ;
}
 

Y el css para el seudolemento:

Código CSS:

.box::after{
  content: '';
  display: block;
  position: absolute;
  /*con inherit, el bloque tendrá siempre el mismo fondo que el padre*/
  background: inherit; 
  width: 100%;
  left: 0;
  top: 100%;
}
 
/*Yo separe esta parte, para no tener que volver
* a usarlo en el ejemplo 2, pero fácilmente 
*pueden ir en un solo estilo.*/
 
/*Este elemento queda encima del texto*/
#box1::after{
  height:55px;
  /*con esto lo obligamos a estar una capa abajo*/
  z-index: 1;
  transform: 
    skewY(15deg)
    translateY(-50%);
}
 
#box1 span{ position: relative; z-index: 2;  }
/*con esto al texto lo mandamos una capa arriba*/
 

Propuesta 2: Clip-Path

Clip-path crea una máscara de forma sobre el elemento y solo hace visible lo que se "conecte" mediante las coordenadas, esto nos sirve muy bien para el siguiente ejemplo, donde no necesitamos el span:

Código HTML:

<div id="box2" class="box">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit cupiditate, autem a ipsam provident similique alias incidunt fugiat quidem sed non. Omnis voluptatibus neque in. Temporibus ut omnis illum consequuntur?
</div>
 

Y en el css, podemos repetir el css de la caja y del seudoelemento con la clase "box" y solo necesitamos manipular el estilo del pseudo-elemento:

Código CSS:

/*.box y .box::after
* los dejamos tal cual el css ejemplo de arriba
* solo modificamos la caja 2 con el ID #box2
*/
 
#box2::after{
  height: 50px;  
  /*En esta solución el corte lo logramos con mascaras de clip*/
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%
  );  
}
 

Para ver una versión demo en vivo, te anexo el pen: https://codepen.io/g3kdigital/pen/JOpmYG

Prueba a cambiar el color de fondo del body.