Maison > Article > interface Web > Explication détaillée d'exemples simples de création de triangles et de boutons avec CSS

Explication détaillée d'exemples simples de création de triangles et de boutons avec CSS

高洛峰original: 2017-03-04 10:08:382660parcourir

Laissez-moi d'abord parler de la façon de créer un triangle. Je pense que vous verrez des triangles dans la barre de navigation lorsque vous visitez le site Web :

Dans la barre de menu d'en-tête de NetEase. page d'accueil, il y aura aussi un triangle comme celui-ci

Explication détaillée dexemples simples de création de triangles et de boutons avec CSS

Lorsque la souris passera dessus, le triangle se retournera verticalement, comme suit

Explication détaillée dexemples simples de création de triangles et de boutons avec CSS

Maintenant, je partage la méthode de création de triangles, principalement en utilisant des bordures

Tout d'abord, quatre triangles sont fusionnés en un carré, c'est-à-dire les quatre triangles formés par les quatre bordures du carré

Code source :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方形</title>
    <style>
    .p{   
        width: 0px;   
        height: 0px;   
        border-top:50px solid red;         
        border-bottom:50px solid green;   
        border-left:50px solid yellow;   
        border-right:50px solid blue;   
        /*注意：四条边框的宽度必须相同！*/   
}   
    </style>
</head>
<body>
    <p class="p"></p>
</body>
</html>

L'effet est le suivant :

Explication détaillée dexemples simples de création de triangles et de boutons avec CSS

Maintenant, pour retirez l'un des triangles, cachez en fait les autres

Code source :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作三角形箭头</title>
    <style>
    .arrow{   
        width:0;   
        height:0;   
        border-top:50px solid #000;     /*设置并显示上边框*/   
        border-bottom:none;             /*不设置下边框*/   
        border-left:50px solid transparent;     /*设置但隐藏左边框*/   
        border-right:50px solid transparent;    /*设置但隐藏右边框*/   
    }   
    .arrow:hover{   
        border-top:none;                  /*鼠标经过时，不设置上边框*/   
        border-bottom:50px solid #000;    /*鼠标经过时，设置并显示下边框*/   
    }   
    </style>
</head>
<body>
    <p class="arrow"></p>
</body>
</html>

L'effet est le suivant :

Explication détaillée dexemples simples de création de triangles et de boutons avec CSS

Ensuite, je partagerai comment créer un bouton

Il est principalement réalisé en utilisant le style de bordure, l'ombre de boîte et l'effet pseudo-classe

Code source :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作按钮</title>
    <style type="text/css">
    .btn{   
        width:100px;   
        height:100px;   
        background:#ccc;   
        border-radius:50%;   
        box-shadow:5px 5px 10px #000;   /*设置外阴影*/   
    }   
    .btn:active{   
        background:#bbb;   
        box-shadow:5px 5px 10px #000 inset;    /*设置内阴影*/   
    }   
    .btn p{   
        font-size:30px;   
        font-family:"微软雅黑";   
        color:blue;   
        float:left;   
        margin-top:28px;   
        margin-left:20px;   
    }   
    </style>
</head>
<body>
    <p class="btn">
        <a href="###">
            <p>开始</p>
        </a>
    </p>
</body>
</html>

Effet :

Explication détaillée dexemples simples de création de triangles et de boutons avec CSS

L'effet n'est peut-être pas beau, veuillez patienter. Amélioration, chacun peut utiliser son imagination pour produire de meilleurs résultats, je souhaite à tous un bon apprentissage !

L'exemple simple ci-dessus d'utilisation de CSS pour créer des triangles et des boutons est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des exemples plus détaillés d'exemples simples de création de triangles et de boutons avec CSS, veuillez faire attention au site Web PHP chinois pour les articles connexes !

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：Exemple de mise en œuvre de l'effet kaléidoscope sur toileArticle suivant：Exemple de mise en œuvre de l'effet kaléidoscope sur toile

Articles Liés

Voir plus