当前位置:首页 / 网页制作 / CSS教程 / CSS实现书签图案的效果介绍
CSS实现书签图案的效果介绍
芯晴素材特效 分类:CSS教程 发布日期:2018-05-07

这次给大家带来CSS实现书签图案的效果,CSS实现书签图案的注意事项有哪些,下面就是实战案例,一起来看一下。

示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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>

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

jQuery心型图片墙鼠标悬浮变大

2017-03-17   浏览:497

一款红色风格JS+CSS竖向tab选项卡

2013-01-14   浏览:9290

仿win7界面弹出窗口放大缩小网页下载

2017-03-14   浏览:116

jQuery金币抽奖效果网页下载下载

2017-03-14   浏览:184

jQuery手机端上拉下拉刷新页面网页下载

2017-03-14   浏览:274

jQuery房地产贷款计算器网页下载

2017-03-13   浏览:453

jQ OSX底部工具箱

2017-03-18   浏览:343

JS实现文字从页面顶部掉下来的效果

2013-01-11   浏览:8445

支持背景图片的圆角效果的矩形

2013-01-09   浏览:8002

jQuery简易日历插件下载

2017-03-13   浏览:505

jQuery+CSS3实现黑色圆形时钟网页下载

2017-03-13   浏览:444

jQuery实现图片滑动导航

2017-03-16   浏览:439