Beispiel für die Implementierung des Lesezeicheneffekts mit CSS-CSS-Tutorial-php.cn

Beispiel für die Implementierung des Lesezeicheneffekts mit CSS

高洛峰

Freigeben： 2017-02-25 14:54:17

Original

2545 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!