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. 
CSS-Tutorial
beziehenDas 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!
