So erzielen Sie mit CSS einen Häkcheneffekt

Um den Häkcheneffekt zu erzielen, besteht eine Idee darin, mit vorgefertigten Symbolen direkt im Internet nach √ zu suchen und es in die Seite einzufügen. Eine weitere Idee ist die Verwendung von CSS zur Einführung in diesem Artikel. Die Idee ist:

(Verwandte Empfehlung: css-Video-Tutorial)

Legen Sie die Breite und Höhe des Elements auf Blockebene fest.

Legen Sie zwei benachbarte Ränder des Elements fest

Element drehen

HTML

<div class="check-style-unequal-width"></div>

Analyse:

Sie müssen hier Elemente auf Blockebene verwenden

Keine Notwendigkeit, den Elementinhalt festzulegen

CSS

.check-style-unequal-width {
 
    width: 8px;
 
    height: 16px;
 
    border-color: #009933;
 
    border-style: solid;
 
    border-width: 0 3px 5px 0;
 
    transform: rotate(45deg);
 
}

Analyse:

Stellen Sie die Breite und Höhe ein, um ein Rechteck zu erhalten Effekt, und das Rechteck befindet sich in Kein Inhalt

Legen Sie den Stil des angrenzenden Rahmens fest und erhalten Sie den allgemeinen Umriss des Häkchens.

Verwenden Sie das Rotationsattribut, um das Häkchen erfolgreich zu erhalten Wie im Bild oben gezeigt, besteht die erste aus zwei Linien. Die zweite ist der Häkcheneffekt mit gleicher Breite, die zweite ist der Häkcheneffekt aus zwei Linien mit ungleicher Breite und die dritte ist der Häkcheneffekt aus zwei Linien Linien gleicher Breite und gleicher Länge. Eine detaillierte Implementierung finden Sie im Quellcode.

Hinweis:

Es ist sinnlos, die Breite und Höhe von Elementen auf Zeilenebene direkt festzulegen. Sie müssen die Anzeige festlegen, um es zu einem Element auf Blockebene zu machen. Beispiel: span muss die Anzeige auf „Inline-Block“ einstellen, um für dieses Beispiel geeignet zu sein.

Sie können die Breite und Höhe des Elements entsprechend den tatsächlichen Anforderungen anpassen.

Sie können verschiedene Ränder sowie die Breite entsprechend den tatsächlichen Anforderungen festlegen von angrenzenden Rändern

Sie können diesen Effekt erzielen. Nehmen Sie eine einfache Änderung vor, die auf die Pseudoelemente ::before und ::after wirkt. Sie können sich auf ::vorher und ::nachher

Empfohlenes Tutorial:

CSS-Tutorial

beziehen

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Häkcheneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!