Heim >Web-Frontend >CSS-Tutorial >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:382711Durchsuche
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
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:
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:
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:
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!