css不用旋转实现返回箭头,圆点,三角形
2015-09-10 15:33
901 查看
返回按钮
.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: 2px;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;}
相关文章推荐
- 基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果
- CSS设计之页面滚动条出现时防止页面跳动的方法
- 基于CSS3实现的漂亮Menu菜单效果代码
- CSS 基础选择器
- css获取实时样式
- 纯CSS实现的菱形导航菜单效果代码
- CSS 之Box-sizing 属性的使用方法
- CSS灵活运用expression来区分只读文本框
- PowerDesigner修改设计图中文字的字体大小等样式
- css自总结01
- CSS中的!important属性用法
- input的file组件按钮上默认文字的修改
- CSS3中颜色线性渐变实战
- 可以直接拿来用的css表格样式
- 页面不够高,尾部在底部样式
- select下拉框与层之冲突
- gulp及gulp说明
- web 中重新播放css 动画
- CSS强制性换行
- ToolBar样式颜色,图标设置