Criando um canto inclinado em uma caixa CSS

Conseguir um canto inclinado em uma caixa CSS pode ser conseguido usando vários métodos. Uma abordagem é descrita abaixo:

Método usando bordas

Esta técnica depende da criação de uma borda transparente ao longo do lado esquerdo de um contêiner e uma borda inclinada ao longo da parte inferior . O código a seguir demonstra como implementar isso:

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;
}

Isso produzirá uma caixa com um canto superior esquerdo inclinado em um ângulo de 45 graus.

Método alternativo usando transparência

Para permitir texto dentro da parte inclinada, uma borda transparente adicional pode ser usada. O código modificado abaixo ilustra essa abordagem:

  
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 cria uma borda inclinada que pode exibir texto ao longo de seu comprimento.