Comment dessiner des lignes diagonales en CSS

À l'aide d'une seule balise, comment obtenir l'effet de barre oblique illustré dans la figure ci-dessous. Autrement dit, comment dessiner une barre oblique en utilisant CSS ?

Nous supposons que notre structure HTML est la suivante :

<div></div>

Méthode 1, Mise à l'échelle de la rotation CSS3

Ici, nous utilisons des pseudo-éléments pour tracer une ligne droite, puis pivotons de 45 degrés autour du centre du div, puis mettons-le à l'échelle.

Implémentation spécifique du code CSS :

div{
  position:relative;
  margin:50px auto;
  width:100px;
  height:100px;
  box-sizing:border-box;
  border:1px solid #333;  
  // background-color:#333;
  line-height:120px;
  text-indent:5px;
}
div::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:50px;
  box-sizing:border-box;
  border-bottom:1px solid deeppink;
  transform-origin:bottom center;
  // transform:rotateZ(45deg) scale(1.414);
  animation:slash 5s infinite ease;
}
@keyframes slash{
  0%{
    transform:rotateZ(0deg) scale(1);
  }
  30%{
    transform:rotateZ(45deg) scale(1);
  }
  60%{
    transform:rotateZ(45deg) scale(1.414);
  }
  100%{
    transform:rotateZ(45deg) scale(1.414);
  }
}

Méthode 2, Implémentation du dégradé linéaire

Cette méthode utilise l'implémentation du dégradé linéaire du fond Le dégradé. l'arrière-plan est très important. Le point important est que même si le nom s'appelle dégradé, vous pouvez également dessiner des couleurs unies au lieu de couleurs dégradées.

Nous sélectionnons la direction du dégradé linéaire sur 45 degrés et définissons la valeur de couleur du dégradé sur : transparent -> deeppink -> deeppink ->transparent.

transparent est la valeur de la couleur transparente.

Une phrase simple comme celle-ci peut obtenir l'effet slash :

div{
  background:
    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}

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!