Heim > Artikel > Web-Frontend > Beispiel für die Implementierung des Lesezeicheneffekts mit CSS

Beispiel für die Implementierung des Lesezeicheneffekts mit CSS

高洛峰Original: 2017-02-25 14:54:172501Durchsuche

Dieser Artikel schreibt einen Lesezeicheneffekt durch reinen CSS-Code. Der Artikel enthält einen vollständigen Beispielcode, der für jeden sehr einfach zu verstehen und zu erlernen ist. Bei Bedarf können Freunde darauf zurückgreifen und gemeinsam lernen.

Das erzielte Effektdiagramm lautet wie folgt:

Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>border制作书签（图形）</title>
        <style>
            .p2:before { /*做一个书签效果*/
                position: absolute; /*必须*/
                top: 50px;
                left: 20px;
                z-index: 1;
                height: 0;
                padding-right: 10px;
                font-weight: bold;
                line-height: 0;
                color: #000;
                border: 15px solid #ee7600;
                border-right-color: transparent; /*右边框透明，变成空缺的角*/
                content: &#39;书签&#39;;
                box-shadow: 0 5px 5px -5px #000;
            }
            .p2:after { /*书签的夹角*/
                content: &#39;&#39;;
                position: absolute;
                top: 80px;
                left: 20px;
                border: 4px solid #89540c;
                border-left-color: transparent;
                border-bottom-color: transparent;
            }
        </style>
    </head>
    <body>
        <p class="p1"></p>
        <p class="p2"></p>
    </body>
</html>

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen helfen kann Wenn ja, können Sie bei Fragen gerne eine Nachricht hinterlassen.

Weitere Artikel zur CSS-Implementierung von Beispielen für Lesezeicheneffekte finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：Das CSS-Attribut transparent implementiert verschiedene DreiecksbeispieleNächster Artikel：Das CSS-Attribut transparent implementiert verschiedene Dreiecksbeispiele

In Verbindung stehende Artikel

Mehr sehen