经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 原理也挺简单,就是写个上边框和右边框,然后旋转45度就是向右的箭头了。不过移动端用应该没问题,pc上就要考虑transform的兼容性了。 ...
经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 原理也挺简单,就是写个上边框和右边框,然后旋转45度就是向右的箭头了。不过移动端用应该没问题,pc上就要考虑transform的兼容性了。 ...
width: 7px; height: 7px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transf ...
代码: 图片资源 ...
最近在仿京东的首页,看了下京东的网页 有些文字背后都带有一些向下的箭头【◇】 鼠标移动上去之后又变为向上。开始以为是使用的背景图,后来发现是使用CSS实现的,大概看了下,想出了下面的实现方法: 元素的边框其实是一个正方形实现的 通过给四个方法的边框定义不同的color 和 style ...
.home_list li:after { position: absolute; right: 10px; top: 50%; display: inlin ...
...
效果如下: ...
小箭头的实现 原理 (1)使用css绘制两个三角形 (2)通过绝对定位让两个三角形不完全重叠 (3)让处于上层的三角形比处于下层的三角形偏移1像素,生成空心箭头 兼容处理: 在IE6及更低版本的浏览器中添加font-size: 0; line-height ...