Wie zeichnet man diagonale Linien in CSS?

So erzielen Sie mit einem einzelnen Tag den in der folgenden Abbildung gezeigten Slash-Effekt. Das heißt, wie zeichnet man mit CSS einen Schrägstrich?

Wir gehen davon aus, dass unsere HTML-Struktur wie folgt aussieht:

<div></div>

Methode 1, CSS3-Rotationsskalierung

Hier verwenden wir Pseudoelemente, um eine gerade Linie zu zeichnen, sie dann um 45 Grad um die Mitte des Div zu drehen und sie dann zu skalieren.

Spezifische Implementierung des CSS-Codes:

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

Methode 2, Lineare Gradientenimplementierung

Diese Methode verwendet die lineare Gradientenimplementierung des Hintergrunds Der Hintergrund ist sehr wichtig. Obwohl der Name Verlauf heißt, können Sie anstelle von Verlaufsfarben auch Volltonfarben zeichnen.

Wir wählen die Richtung des linearen Farbverlaufs als 45 Grad und stellen den Farbverlaufswert auf: transparent -> tiefrosa ->

transparent ist der transparente Farbwert.

Ein einfacher Satz wie dieser kann den Slash-Effekt erzielen:

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

Das obige ist der detaillierte Inhalt vonWie zeichnet man diagonale Linien in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!