CSS réalise l'effet du modèle de signet-tutoriel CSS-php.cn

CSS réalise l'effet du modèle de signet

php中世界最好的语言

Libérer： 2018-03-22 14:23:09

original

5427 Les gens l'ont consulté

Cette fois, je vais vous présenter l'effet de l'implémentation de modèles de signets avec CSS. Quelles sont les précautions pour implémenter des modèles de signets avec CSS. Voici des cas pratiques, jetons un coup d'œil.

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: '书签';
                box-shadow: 0 5px 5px -5px #000;
            }
            .p2:after { /*书签的夹角*/
                content: '';
                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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. plus d'informations intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

Explication graphique et textuelle détaillée de float en CSS

Quatre méthodes de masquage en html+css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!