Comment créer une boîte biseautée en CSS ?

Boîte biseautée en CSS

Créer une boîte avec des coins biseautés en CSS est une exigence courante. La difficulté d’obtenir cet effet dépend de la taille du biseau.

Pour les biseaux plus petits, vous pouvez utiliser l'attribut box-shadow. Pour les biseaux plus grands, des techniques plus complexes sont nécessaires.

Utilisation de polygones CSS

La propriété polygone a été introduite dans CSS3, ce qui facilite grandement la création de biseaux. À l'aide de polygones, vous pouvez spécifier une forme personnalisée incluant des biseaux.

<code class="css">.cornered {
  width: 160px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0 0, 0 40px, 40px 80px, 80px 0);
}</code>

Utilisez une bordure transparente

Une autre façon consiste à utiliser une bordure transparente. Vous pouvez créer un effet biseauté en plaçant une bordure transparente dans un conteneur avec une couleur d'arrière-plan.

<code class="css">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid transparent;
}

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Cette méthode est utile pour créer des biseaux plus petits et est particulièrement utile lorsque vous travaillez avec du texte.

Utiliser des bibliothèques tierces

Il existe également de nombreuses bibliothèques tierces qui peuvent être utilisées pour créer des boîtes aux coins biseautés. Ces bibliothèques offrent des moyens pratiques d’obtenir cet effet sans avoir à écrire du CSS vous-même.

Certaines bibliothèques populaires incluent :

• [Slantastic](https://meyerweb.com/eric/css/edge/slantastic/)
• [Trianglify ] (https://github.com/qrohlf/trianglify)
• [Polygone](https://github.com/polygonjs/polygon.js)

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!