這次給大家帶來CSS實現書簽圖案的效果，CSS實現書簽圖案的注意事項有哪些，下面就是實戰案例，一起來看一下。

示例代碼如下：

border制作書簽(圖形)

.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;

}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

總結

以上是生活随笔為你收集整理的html css 书签,CSS实现书签图案的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。