html css 书签,CSS实现书签图案的效果
這次給大家?guī)?lái)CSS實(shí)現(xiàn)書(shū)簽圖案的效果，CSS實(shí)現(xiàn)書(shū)簽圖案的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
示例代碼如下：
border制作書(shū)簽(圖形).p2:before { /*做一個(gè)書(shū)簽效果*/
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: '書(shū)簽';
box-shadow: 0 5px 5px -5px #000;
}
.p2:after { /*書(shū)簽的夾角*/
content: '';
position: absolute;
top: 80px;
left: 20px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
}
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
總結(jié)
以上是生活随笔為你收集整理的html css 书签,CSS实现书签图案的效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： HTTP方法的幂等性
- 下一篇： CSS现代字体栈