recherche

Maison  >  Article  >  interface Web  >  Exemple d'effet de signet utilisant CSS

Exemple d'effet de signet utilisant CSS

高洛峰
高洛峰original
2017-02-25 14:54:172559parcourir

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>

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 !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：L'attribut CSS transparent implémente divers exemples de trianglesArticle suivant：L'attribut CSS transparent implémente divers exemples de triangles

Articles Liés

Voir plus