Heim > Artikel > Web-Frontend > Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

高洛峰Original: 2017-03-04 10:08:382660Durchsuche

Lassen Sie mich zunächst darüber sprechen, wie Sie ein Dreieck erstellen, wenn Sie die Website besuchen. Zum Beispiel:

In der Kopfzeilenmenüleiste von NetEase Homepage, es wird auch ein Dreieck wie dieses geben

Wenn die Maus darüber fährt, wird das Dreieck wie folgt vertikal gespiegelt

Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

Jetzt teile ich die Methode zur Herstellung von Dreiecken, hauptsächlich unter Verwendung von Rändern

Zunächst werden vier Dreiecke zu einem Quadrat zusammengefügt, d. h. die vier Dreiecke, die durch die vier Ränder des Quadrats gebildet werden

Quellcode:

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

Der Effekt ist wie folgt:

Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

Nun, zu Nehmen Sie eines der Dreiecke heraus und verstecken Sie tatsächlich die anderen

Quellcode:

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

Der Effekt ist wie folgt:

Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

Als nächstes werde ich erklären, wie man eine Schaltfläche erstellt.

Dies wird hauptsächlich durch die Verwendung von Rahmenstil, Boxschatten und Pseudoklasseneffekt realisiert

Quellcode:

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

Wirkung:

Ausführliche Erklärung einfacher Beispiele für die Erstellung von Dreiecken und Schaltflächen mit CSS

Der Effekt ist möglicherweise nicht schön, bitte warten Sie. Verbesserung, jeder kann seiner Fantasie freien Lauf lassen, um bessere Ergebnisse zu erzielen. Ich wünsche allen viel Spaß beim Lernen!

Das obige einfache Beispiel für die Verwendung von CSS zum Erstellen von Dreiecken und Schaltflächen ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.

Ausführlichere Beispiele für einfache Beispiele zum Erstellen von Dreiecken und Schaltflächen mit CSS finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für die Umsetzung des Kaleidoskopeffekts auf LeinwandNächster Artikel：Beispiel für die Umsetzung des Kaleidoskopeffekts auf Leinwand

In Verbindung stehende Artikel

Mehr sehen