css直接写出小三角
2016-06-13 17:35
417 查看
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!
先看看如何写出各种小三角!
先看看如何写出各种小三角!
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #000; } /*箭头向下*/ .arrow-down { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-top:30px solid #000; } /*箭头向左*/ .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid #000; } /*箭头向右*/ .arrow-right { width:0; height:0; border-top:30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #000; } /*:after 伪元素在元素之后添加内容实现小三角*/ .box{ width:300px; height:300px; background:#838383; position:relative;} .box:after{ position:absolute; right:-20px; top:10px; display:block; content:""; width:0; height:0; border-top:20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #838383; }
相关文章推荐
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- 编码规范(CSS)
- CSS3.0动画之hover---Y轴----3D旋转
- QT QGraphicsView QGraphicsScene用法
- js 模拟css3 动画3
- js 模拟css3 动画2
- 文本输入框的两种div+css的写法
- css实现省略号
- CSS的相对定位和绝对定位
- 使用footable的问题及解决方案
- 页面样式base.css
- 去掉IE10、IE11的默认文本框样式
- css工具
- HTML + css 页面按比例排版
- CSS3 @font-face详细用法(转)
- CSS3景颜色渐变(转)
- CSS3景颜色渐变(转)
- css鼠标样式
- CSS vs JS动画:谁更快?
- CSS 中文字体表达方式