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

Style des coins biseautés sur un bloc div

Dans le document HTML fourni, un bloc div standard avec une bordure solide est défini. Le but est de créer un effet de coin biseauté sur le côté droit du div.

Pour obtenir cet effet en utilisant CSS3, la propriété border-corner-shape serait la solution idéale. Cependant, il n’est pas encore entièrement pris en charge par tous les navigateurs. Une approche alternative qui exploite les transformations CSS3 offre une solution de contournement :

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;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Cette approche implique l'ajout d'un div supplémentaire comme élément after de .box. Ce div est positionné absolument sur l'élément .box, avec une transformation asymétrique pour créer l'effet biseauté.

Pour une illustration plus détaillée, voir la démo JSBin fournie dans la réponse. Notez que l'exemple inclut également une autre classe div (box2) qui démontre une implémentation alternative sans déclarations CSS3.

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!