效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.arrow-up {display: inline-block;vertical-align: top;border-bottom: 4px solid #dd0000;border-right: 4px solid transparent;border-left: 4px solid transparent;content: "";margin-top: 5px;}.arrow-down {display: inline-block;vertical-align: top;border-top: 4px solid #dd0000;border-right: 4px solid transparent;border-left: 4px solid transparent;content: "";margin-top: 5px;}.arrow-left {display: inline-block;vertical-align: top;border-right: 4px solid #dd0000;border-top: 4px solid transparent;border-bottom: 4px solid transparent;content: "";margin-top: 5px;}.arrow-right {display: inline-block;vertical-align: top;border-left: 4px solid #dd0000;border-top: 4px solid transparent;border-bottom: 4px solid transparent;content: "";margin-top: 5px;}</style>
</head>
<body><button>向上<span class="arrow-up"></span></button>
<button>向下<span class="arrow-down"></span></button>
<button>向左<span class="arrow-left"></span></button>
<button>向右<span class="arrow-right"></span></button></body>
</html>

形成符号的元素不再是宽和高围成的，而是通过border.

一个没有内容的元素。如果你给它添加border-left和border-top并且设置成同样颜色，它倆将围成一个小方块，对方块奉献的比重为1：1，

所以当你将其中的一个边设置为透明色的时候，方块按对角线剩下一半。

怎样用css3设计出向上向下的小箭头相关推荐

css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？
需要先了解的知识: ①了解CSS的2d下的transform变化下的平移(translate)和旋转(rotate). ②了解CSS的3d下的transform变化下的平移和旋转. ③使用transf ...
css3实现小图标向下引导小箭头动态效果
css3实现小图标向下引导小箭头动态效果网上转的 ,记录下来,方便下次用到 <!DOCTYPE html> <html><head><meta charse ...
批量删除Word中向下的小箭头和回车的方法
批量删除Word中向下的小箭头和回车的方法阅读(13) 评论(0) 发表时间:2008年08月11日 21:34 本文地址:http://qzone.qq.com/blog/231542468-12 ...
清除/更换word文档里段落最后的向下的小箭头（软回车符号/键）
word文档中带有向下箭头的符号是软回车符号.如果只要隐藏,可以在word工具菜单上点"视图"-"显示段落标记",去掉"显示段落标记"前面的 ...
IE 下 SELECT 小箭头乱码
最近项目中,出现了一个比较奇葩的问题,就是在 IE 浏览器下,select 标签自带的小箭头乱码了显示成一个乱七八糟的字符.如图: 首先问题说明:不是前端的事!不是前端的事!不是前端的事! 但是对于领 ...
Origin2018怎么画出向上向下的柱状图
使用origin怎么画出,如果数值大于1的柱状向上,小于1的柱状向下的类似如下所示的图形呢? 步骤如下: (1)准备数据:如图所示的分类数据(数据为瞎编的),自己做的时候看自己的数据来啊. (2)fi ...
ps怎么把图层置入图层，就像cdr的置入容器一样。如图有个向下的小箭头的
这个是用到了剪贴蒙板功能首先下面的一层为你需要的形状,上面一层为图片,然后选中图片层,ctrl+alt+G创建剪贴蒙板就可以了 (另外,按住alt点形状图层和图片图层之间的空隙也可以添加剪贴蒙板 ...
一个select元素自定义设计的新思路：appearance: none之后利用符号制造小箭头
最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...
如何去除ie的select下拉框箭头图标
select {width: 100%;height: 34px;border: solid 1px #0086EA;/*为下拉小箭头留出一点位置,避免被文字覆盖*/padding-right:34p ...

怎样用css3设计出向上向下的小箭头

效果图：

怎样用css3设计出向上向下的小箭头相关推荐

最新文章

热门文章