Crear una esquina inclinada en un cuadro CSS

Se puede lograr una esquina inclinada en un cuadro CSS utilizando varios métodos. Un enfoque se describe a continuación:

Método usando bordes

Esta técnica se basa en la creación de un borde transparente a lo largo del lado izquierdo de un contenedor y un borde inclinado a lo largo de la parte inferior. . El siguiente código demuestra cómo implementar esto:

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

Esto producirá un cuadro con una esquina superior izquierda inclinada en un ángulo de 45 grados.

Método alternativo usando transparencia

Para Si permite texto dentro de la parte inclinada, se puede utilizar un borde transparente adicional. El código modificado a continuación ilustra este enfoque:

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Este método crea un borde inclinado que puede mostrar texto a lo largo de su longitud.