利用CSS实现书签效果实例源码

前端  /  管理员 发布于 7年前   266

实现的效果图如下：

示例代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>border制作书签（图形）</title>        <style>.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;}        </style>    </head>    <body>        <div class="div1"></div>        <div class="div2"></div>    </body></html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。


  • 上一条：
    用CSS属性transparent实现各种三角形示例代码
    下一条：
    详解CSS3浏览器兼容

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客