Comment créer des coins biseautés pour les blocs div en CSS sans utiliser border-corner-shape ?

Réalisation de coins biseautés pour les divisions de blocs en CSS

La tâche de styliser une division de blocs avec des coins biseautés peut être abordée de différentes manières . CSS4 border-corner-shape reste une option, cependant, sa mise en œuvre est toujours en attente. Par conséquent, nous allons explorer une solution utilisant les transformations CSS3.

Implémentation à l'aide des transformations CSS3

Dans le document HTML, créez un élément div avec la classe souhaitée. nom du bloc.

HTML :

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

Définissez le style en CSS comme suit :

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);
}

Cette solution maintient intacte la propriété de bordure d'origine, la laissant disponible pour des ajustements ultérieurs. Pour une démonstration pratique, reportez-vous à la démo JSBin fournie.

Solution alternative utilisant la deuxième division

Pour plus de simplicité, envisagez une autre implémentation CSS qui obtient des résultats similaires en utilisant un deuxième div sans CSS3. Voir la classe box2 dans le CSS fourni précédemment.

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!