Heim > Artikel > Web-Frontend > Detaillierte Erläuterung einfacher Beispiele für die Dreiecksimplementierung in CSS
Detaillierte Erläuterung einfacher Beispiele für die Dreiecksimplementierung in CSS
- 高洛峰Original
- 2017-03-07 14:49:281642Durchsuche
In vielen Seitenproduktionen wird ein Dreieck so gestaltet, dass es hervorsteht. Hier ist eine Designmethode, die mit verschiedenen Browsern kompatibel ist:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.corner-top{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#e66161 transparent transparent transparent;
}
.corner-bottom{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed solid dashed;
border-color:transparent transparent #94e24f transparent;
}
.corner-left{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #85bfda;
}
.corner-right{
width:0px;
height:0px;
font-size:0;
border-width:20px;
border-style:dashed solid dashed dashed;
border-color:transparent #f3bb5b transparent transparent;
}
</style>
</head>
<body>
<p class="corner-top"></p>
</br>
<p class="corner-bottom"> </p>
</br>
<p class="corner-left"> </p>
</br>
<p class="corner-right"> </p>
</body>
</html>
Wichtige Punkte:
1 ist mit IE kompatibel, andernfalls wird IE trapezförmig angezeigt, oder line-height:0; >
2. Um die erweiterbare Zeile zu verbessern, stellen Sie die Rahmenfarbe auf transparent ein, im IE ist die Kompatibilitätsmethode jedoch auf gestrichelt eingestellt Im Projekt wird im Allgemeinen die Option „Absolute Positionierung“ ausgewählt, um das Dreieck an der entsprechenden Position zu positionieren. Manchmal ist es jedoch nicht erforderlich, ein umgekehrtes Dreieck zu verwenden. Das Ergebnis ist, dass der Container mehrere Höhen aufweist die Höhe des Containers und dann Überlauf: versteckt; (das Prinzip des Dreiecksdesigns ist bekannt)Das obige einfache Beispiel für die Implementierung eines Dreiecks in reinem CSS ist der gesamte vom Editor geteilte Inhalt Ich kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen. Ausführlichere Erklärungen einfacher Beispiele für die Verwendung von CSS zur Implementierung von Dreiecken finden Sie auf der chinesischen PHP-Website!
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：Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-NachkommenselektorsNächster Artikel：Ausführliche Erläuterung grundlegender Anwendungsbeispiele des CSS-Nachkommenselektors