Exemples de méthodes pour créer diverses icônes Web à l'aide de CSS

Cet article vous présente principalement les informations pertinentes sur la création de diverses icônes Web (triangle, bouton pause, flèche de téléchargement, signe plus, etc.) en utilisant du CSS pur. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec. maintenant et donnez-le à tout le monde. Voici une référence pour tout le monde, j'espère que cela pourra aider tout le monde.

Triangle

<p class="box"></p>
<style>
.box{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid red;
}
</style>

Icône de parallélogramme

<p class="box"></p>
<style>
 .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            background-color: red;
            transform: skew(-25deg);
        }
</style>

Bouton Pause

<p class="box"></p>
    <style>
        .box{
            width: 50px;
            height: 50px;
            margin: 100px auto;
            color: #000;
            border: 1px solid;
            border-radius: 50%;
            outline: 10px solid;
            outline-offset: -26px;
        }
    </style>

Le principe de mise en œuvre du bouton pause est d'utiliser border pour la bordure et outline pour le carré à l'intérieur. Parce que le contour a un attribut de décalage qui peut être utilisé pour définir le décalage, et il est basé sur la proportion.

En fait, si vous définissez la valeur du décalage du contour un peu plus petite, elle apparaîtra après un seul ajout

Signe plus

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
    }
</style>

Si vous le faites pivoter à nouveau, il devient un bouton de fermeture

Bouton de fermeture

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 50px;
        margin: 100px auto;
        color: #000;
        border: 1px solid;
        border-radius: 50%;
        outline: 10px solid;
        outline-offset: -35px;
        transform: rotate(45deg);
    }

Bouton Hamburger

<p class="box"></p>
<style>
    .box{
        width: 50px;
        height: 0px;
        margin: 100px auto;
        box-shadow: 36px 10px 0 3px red,
        36px 0 0 3px red,
        36px 20px 0 3px red;
    }
</style>

Bouton Burger 2 :

<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 3px;
        margin: 100px auto;
        padding: 2px 0;
        border-top: 3px solid red;
        border-bottom: 3px solid red;
        background-clip: content-box;
        background-color: red;
    }
</style>

Bouton radio

Étant donné que l'ombre de la boîte sera mise à l'échelle proportionnellement, définissez simplement la première valeur sur blanc, puis définissez la deuxième valeur pour qu'elle soit plus grande que la première valeur

<p class="box"></p>
<style>
    .box{
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
    }
</style>

Cercle avec une croix

<p class="box"></p>
<style>
    .box {
        width: 30px;
        height: 30px;
        margin: 100px auto;
        background-color: #000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
        outline: 36px solid #fff;
        outline-offset: -50px;
    }
</style>

Icône de champ

<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        border: 3px solid red;
        outline: 6px dotted red;
        outline-offset: 6px;
    }
</style>

Flèche de téléchargement

Utilisez la bordure pour créer des triangles, l'ombre de la boîte pour créer des carrés, principalement en utilisant le décalage

<p class="box"></p>
<style>
    .box {
        width: 0;
        margin: 100px auto;
        color: red;
        border: 8px solid transparent;
        border-top: 8px solid red;
        box-shadow: 0 -12px 0 -4px;
    }
</style>

signet

Le principe pour obtenir cet effet est de régler le triangle sur la couleur de fond, pour que le triangle creux apparaisse

<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 8px;
        background-color:orange;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }
</style>

Deux icônes en demi-cercle

C'est relativement simple, cela est implémenté via la fonction dégradé, puis une bordure arrondie

<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        background-image: linear-gradient(to right,#ccc 50%,#000 50%);
    }
</style>

Icônes désactivées

Le cercle extérieur utilise une bordure arrondie et la verticale à l'intérieur. Utilisez un dégradé pour rendre le ligne, puis utilisez l'attribut de rotation

<p class="box"></p>
<style>
    .box {
       width: 50px;
        height: 50px;
        border-radius: 50%;
        border:2px solid #000;
        background: linear-gradient(to right,#fff  45%,#000 45%,#000 45%,#fff 55%);
        transform: rotate(40deg);
    }
</style>

Icônes de flèche gauche et droite

Puisque vous pouvez faire un triangle, vous pouvez faire deux triangles.

<p class="box"></p>
<style>
    .box {
        width: 0;
        height: 0;
        margin: 100px auto;
        border: 10px solid transparent;
        border-left: 10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
    }
</style>

doit être ouvert dans le navigateur Chrome, car d'autres navigateurs peuvent ne pas prendre en charge

Icône de bec d'aigle

<p class="box"></p>
<style>
    .box {
       width: 32px;
        margin: 100px auto;
        border-top: 50px solid transparent;
        border-right: 22px solid #096;
        border-bottom-right-radius: 100%;;
    }
</style>

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!