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

Beispiel für die Implementierung des Lesezeicheneffekts mit CSS

高洛峰
Freigeben: 2017-02-25 14:54:17
Original
2600 Leute haben es durchsucht

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:

Beispiel für die Implementierung des Lesezeicheneffekts mit CSS

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage