Comment obtenir des coins biseautés sur un bloc div à l'aide de transformations CSS3 ?

Biseauter les coins d'un bloc div avec CSS3

Réaliser des coins biseautés sur un bloc div était autrefois un défi avant le border-corner de CSS4. propriété de forme. Cependant, avec les transformations CSS3, nous pouvons créer cet effet tout en préservant la propriété border pour des utilisations futures.

Examinons une structure HTML et des styles CSS pour créer des coins biseautés :

HTML :

<code class="html"><div class="box">
  Text Content
</div></code>

CSS :

<code class="css">.box {
  width: 200px; 
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;  
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Dans le code CSS, nous utilisons un pseudo-élément pour créer le coin biseauté. Ce pseudo-élément est positionné de manière absolue et a un z-index négatif pour garantir qu'il reste derrière le div principal. La transformation skew() est appliquée pour faire pivoter le coin.

Il est important de noter que la propriété border-right est définie sur 0 pour créer l'illusion d'un coin biseauté. La propriété border-left du pseudo-élément est également définie sur 0 pour garantir un coin visuellement propre.

Cette technique ajoute efficacement des coins biseautés aux divs de bloc, permettant des conceptions plus attrayantes visuellement.

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!