Hacer un div con forma

[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.