實現的效果圖如下：

示例代碼如下：

border制作書簽(圖形)

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

}

.div2:after { /*書簽的夾角*/

content: '';

position: absolute;

top: 80px;

left: 20px;

border: 4px solid #89540c;

border-left-color: transparent;

border-bottom-color: transparent;

}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

總結

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

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