Maison >interface Web >tutoriel CSS >Exemple d'effet de signet utilisant CSS
Exemple d'effet de signet utilisant CSS
- 高洛峰original
- 2017-02-25 14:54:172607parcourir
Cet article écrit un effet de signet via du code CSS pur. L'effet de signet après la mise en œuvre est très beau. L'article donne un exemple de code complet. Le code implémenté est également très simple, ce qui est très pratique à comprendre et à apprendre. Si nécessaire, les Amis peuvent s'y référer et apprendre ensemble.
Le diagramme d'effet obtenu est le suivant :
L'exemple de code est le suivant :
<!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>
Résumé
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide à l'étude de chacun. ou travailler. Si c'est le cas, si vous avez des questions, vous pouvez laisser un message pour communiquer.
Pour plus d'articles liés à l'implémentation CSS d'exemples d'effets de signets, veuillez faire attention au site Web PHP chinois !