Comment obtenir un effet de coin biseauté sur un élément Div à l'aide de transformations CSS3 ?

Comment créer un coin biseauté sur un élément Div à l'aide de transformations CSS3

Problème :

Considérez un document HTML avec un élément div avec une bordure droite. Comment pouvons-nous modifier son style pour obtenir un coin biseauté, comme le montre l'image ci-dessous ?

[Image d'un élément div avec un coin biseauté]

Réponse :

Bien que la propriété CSS4 border-corner-shape en soit encore à ses premiers stades de développement, une solution de contournement utilisant des transformations CSS3 peut être implémentée :

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 technique consiste à créer un élément div de forme triangulaire avec une inclinaison transformée et un positionnement absolu pour obtenir l'effet biseauté. Notez qu'un élément div supplémentaire avec la classe "box2" est également inclus dans le HTML et le CSS, ce qui illustre une approche alternative sans utiliser de 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!