Création d'un coin incliné sur une boîte CSS

L'obtention d'un coin incliné sur une boîte CSS peut être réalisée en utilisant différentes méthodes. Une approche est décrite ci-dessous :

Méthode utilisant les bordures

Cette technique repose sur la création d'une bordure transparente le long du côté gauche d'un conteneur et d'une bordure inclinée le long du bas. . Le code suivant montre comment implémenter ceci :

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

Cela produira une boîte avec un coin supérieur gauche incliné à un angle de 45 degrés.

Méthode alternative utilisant la transparence

Pour autorisez le texte dans la partie inclinée, une bordure transparente supplémentaire peut être utilisée. Le code modifié ci-dessous illustre cette approche :

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

Cette méthode crée une bordure inclinée qui peut afficher du texte sur toute sa longueur.