纯CSS实现箭头,圆点, 三角形。_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 08:52:49
原创
1735 人浏览过

箭头:

.goback {      position: absolute;      top: 18px;      left: 18px;      border: 10px solid transparent;      border-right: 10px solid #ccc;    }        .goback:hover {      border-right: 10px solid #808080;    }        .goback:after {      content: '';      position: absolute;      top: -10px;      left: -7px;      border: 10px solid transparent;      border-right: 10px solid #fff;    }
登录后复制


圆点:

  .circle {      position: absolute;      margin: 52px 45px;      width: 12px;      height: 12px;      background: #fff;      border-radius: 50%;      border: 1px solid #2090ff;    }        .circle:after {      content: '';      margin: 3px;      display: table;      width: 6px;      height: 6px;      background: #2090ff;      border-radius: 50%;    }
登录后复制


三角形:

.triangle {      position: absolute;      top: 16px;      right: 18px;      border: 6px solid transparent;      border-top: 6px solid #123456;    }
登录后复制

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!