Comment créer un coin incliné sur une boîte CSS ?

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 :

<code class="HTML"><div class="cornered"></div>
<div class="main">Hello World</div></code>

<code class="CSS">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

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 permettre le texte dans la partie inclinée, une bordure transparente supplémentaire peut être utilisée. Le code modifié ci-dessous illustre cette approche :

<code class="HTML"><div class="outer">
  <div class="cornered">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.</div>
  <div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div></code>

<code class="CSS">.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;
}</code>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!