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

Biseauter le coin d'un bloc div

Le défi

Dans un document HTML contenant un bloc div avec une classe de "block1", le l'objectif est de créer un coin biseauté sur le côté droit du div, comme illustré dans l'image fournie.

La solution

Pour obtenir cet effet sans utiliser la prochaine forme de bordure de coin CSS4 propriété, nous utilisons des transformations CSS3 en conjonction avec des techniques basées sur la position. 🎜>

Explication

Cette implémentation englobe les techniques suivantes :

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

Transformations CSS3 : La propriété de transformation asymétrique est appliquée à faites pivoter le div ajouté de 45 degrés.

<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>

Positionnement absolu :

Le div ajouté est positionné de manière absolue à l'aide des propriétés haut et droite pour créer le coin biseauté.

Négatif Z-Index :

Le div ajouté reçoit un z-index négatif pour le placer derrière le div d'origine.
• Manipulation de la bordure :
La bordure droite du div d'origine est définie sur zéro. pour éviter une deuxième bordure sur le bord biseauté.
• Modification du remplissage :
Pour compenser la bordure de 1 px supprimée, le droit de remplissage du div d'origine est augmenté de 1 px.

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!