Exemple d'effet de signet utilisant CSS-tutoriel CSS-php.cn

Exemple d'effet de signet utilisant CSS

高洛峰

Libérer： 2017-02-25 14:54:17

original

2546 Les gens l'ont consulté

Cet article écrit un effet de signet via du code CSS pur. L'effet de signet après la mise en œuvre est très beau. L'article donne un exemple de code complet. Le code implémenté est également très simple, ce qui est très pratique à comprendre et à apprendre. Si nécessaire, les Amis peuvent s'y référer et apprendre ensemble.

Le diagramme d'effet obtenu est le suivant :

Exemple deffet de signet utilisant CSS

L'exemple de code est le suivant :

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

Copier après la connexion

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide à l'étude de chacun. ou travailler. Si c'est le cas, si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour plus d'articles liés à l'implémentation CSS d'exemples d'effets de signets, veuillez faire attention au site Web PHP chinois !