Heim >Web-Frontend >CSS-Tutorial >Beispiel für die Implementierung des Lesezeicheneffekts mit CSS
Beispiel für die Implementierung des Lesezeicheneffekts mit CSS
- 高洛峰Original
- 2017-02-25 14:54:172577Durchsuche
Dieser Artikel schreibt einen Lesezeicheneffekt durch reinen CSS-Code. Der Artikel enthält einen vollständigen Beispielcode, der für jeden sehr einfach zu verstehen und zu erlernen ist. Bei Bedarf können Freunde darauf zurückgreifen und gemeinsam lernen.
Das erzielte Effektdiagramm lautet wie folgt:
Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border制作书签（图形）</title>
<style>
.p2:before { /*做一个书签效果*/
position: absolute; /*必须*/
top: 50px;
left: 20px;
z-index: 1;
height: 0;
padding-right: 10px;
font-weight: bold;
line-height: 0;
color: #000;
border: 15px solid #ee7600;
border-right-color: transparent; /*右边框透明，变成空缺的角*/
content: '书签';
box-shadow: 0 5px 5px -5px #000;
}
.p2:after { /*书签的夹角*/
content: '';
position: absolute;
top: 80px;
left: 20px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
</style>
</head>
<body>
<p class="p1"></p>
<p class="p2"></p>
</body>
</html>
Zusammenfassung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen helfen kann Wenn ja, können Sie bei Fragen gerne eine Nachricht hinterlassen.
Weitere Artikel zur CSS-Implementierung von Beispielen für Lesezeicheneffekte finden Sie auf der chinesischen PHP-Website!