用纯CSS实现的箭头
2015-07-19 16:24
537 查看
原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:
一个梯形
当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;<div id="demo11"></div> <style> #demo11 { border: 10px solid #000; border-left-color: #f00; width: 10px; height: 10px; } </style>
一个三角形
当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。<div id="demo12"></div> <style> #demo12 { border: 10px solid #000; border-left-color: #f00; width: 0; height: 0; } </style>
任意角度的三角形
改变各个边的宽度,即通过调整“边框”厚度可以配置出任意角度<div id="demo14"></div> <style> #demo14 { border: 10px solid transparent; border-left: 20px solid #f00; width: 0; height: 0px; } </style>
相关文章推荐
- css 填坑常用代码分享
- listview实现分页效果(底部正在加载样式)
- 纯CSS3画出小黄人并实现动画效果
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器、id选择器和html选择器介绍
- css3中的filter
- 自适应网页设计(html/css控制)
- css3阴影效果
- as3.0 封装一个可垂直居中及左右居中的label,并可以设置其字体样式
- CSS的扩展less和sass
- CSS + DIV 使用方法总结
- CSS3动画
- 默认样式添加
- css中em与px的区别
- css3 背景渐变
- css布局细节思考
- 《开源分享1》:前端开发必备《Html-CSS中文手册》
- 前端开发:《Html-CSS中文手册》分享啦!
- CSS3弹力球
- 【CSS】——基础认识
- CSS布局