Heim Web-Frontend CSS-Tutorial Verwenden Sie CSS, um einen einfachen Häkcheneffekt zu erzielen

Verwenden Sie CSS, um einen einfachen Häkcheneffekt zu erzielen

Dec 31, 2020 am 09:50 AM
css

Verwenden Sie CSS, um einen einfachen Häkcheneffekt zu erzielen

Im Allgemeinen haben wir zwei Ideen zur Implementierung: Eine besteht darin, vorgefertigte Symbole in die Seite einzufügen, und die andere darin, CSS zur Implementierung zu verwenden.

(Lernvideo-Sharing: CSS-Video-Tutorial)

In diesem Artikel wird hauptsächlich die zweite Idee vorgestellt:

  • Legen Sie die Breite und Höhe des Blockebenenelements fest

  • Legen Sie zwei benachbarte Ränder des Elements fest

  • Element drehen

HTML

<div class="check-style-unequal-width"></div>
Nach dem Login kopieren

Analyse:

  • Sie müssen hier Elemente auf Blockebene verwenden

    .check-style-unequal-width {
     
        width: 8px;
     
        height: 16px;
     
        border-color: #009933;
     
        border-style: solid;
     
        border-width: 0 3px 5px 0;
     
        transform: rotate(45deg);
     
    }
    Nach dem Login kopieren
    Analyse:
  • Stellen Sie Breite und Höhe ein, um einen rechteckigen Effekt zu erzielen, und das Rechteck enthält keinen Inhalt.
  • Stellen Sie den Stil des angrenzenden Rahmens ein, um den allgemeinen Umriss des Häkchens zu erhalten.

    • Verwenden Sie das Rotationsattribut erfolgreich Holen Sie sich den Häkcheneffekt

    • Laufeffekt

    • Analyse:

    • Wie im Bild oben gezeigt, ist der erste ein Häkcheneffekt, bei dem zwei Linien gleich breit sind, der zweite ist ein Häkcheneffekt wobei zwei Linien ungleiche Breite haben und die dritte Linie, wenn zwei Linien gleich breit und gleich lang sind. Der Häkcheneffekt.

    Hinweis:

    Verwenden Sie CSS, um einen einfachen Häkcheneffekt zu erzielen

    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 und die Breite benachbarter Ränder festlegen je nach tatsächlichem Bedarf

    • Sie können diesen Effekt einfach ändern und auf die Pseudoelemente ::before und ::after anwenden. Sie können sich auf ::vorher und ::nachher

    • Verwandte Empfehlungen beziehen:

      CSS-Tutorial

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was bedeutet Platzhalter in Vue? Was bedeutet Platzhalter in Vue? May 07, 2024 am 09:57 AM

Was bedeutet Platzhalter in Vue?

So schreiben Sie Leerzeichen in Vue So schreiben Sie Leerzeichen in Vue Apr 30, 2024 am 05:42 AM

So schreiben Sie Leerzeichen in Vue

Wie man Dom in Vue bekommt Wie man Dom in Vue bekommt Apr 30, 2024 am 05:36 AM

Wie man Dom in Vue bekommt

Was bedeutet span in js Was bedeutet span in js May 06, 2024 am 11:42 AM

Was bedeutet span in js

Was bedeutet rem in js Was bedeutet rem in js May 06, 2024 am 11:30 AM

Was bedeutet rem in js

So führen Sie Bilder in Vue ein So führen Sie Bilder in Vue ein May 02, 2024 pm 10:48 PM

So führen Sie Bilder in Vue ein

Welche Funktion hat das Span-Tag? Welche Funktion hat das Span-Tag? Apr 30, 2024 pm 01:54 PM

Welche Funktion hat das Span-Tag?

So verpacken Sie eine Eingabeaufforderung in js So verpacken Sie eine Eingabeaufforderung in js May 01, 2024 am 06:24 AM

So verpacken Sie eine Eingabeaufforderung in js

See all articles