css制作上下左右的箭头
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.arrow {
width:0;
height:0;
position: absolute;
top:0;
left:0;
display: inline-block;
}
.arrow-down { border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #f63; }
.arrow-up {
border-bottom:5px solid #f63;
border-left:5px solid transparent;
border-right:5px solid transparent;
top:50px;
}
.arrow-left {
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-right:5px solid #f63;
top:100px;
}
.arrow-right {
border-top:5px solid transparent;
border-bottom:5px solid transparent;
border-left:5px solid #288;
top:150px;
}
</style>
</head>
<body>
<div style="position: relative">
<span class="arrow arrow-down"></span>
<span class="arrow arrow-up"></span>
<span class="arrow arrow-left"></span>
<span class="arrow arrow-right"></span>
</div>
</body>
</html>
补充：css生成三角形：http://www.sucaihuo.com/tools/triangle
css制作上下左右的箭头的更多相关文章
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- 用css制作空心箭头(上下左右各个方向均有)
平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...
- CSS制作小旗子与小箭头
CSS制作小旗子与小箭头 效果图如下: 小旗子效果图 小箭头效果图 小旗子效果 以下是具体实现代码: <div class="container"> <div c ...
- 使用css制作三角
1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- css制作三角形，下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
随机推荐
- 远程调试Hadoop
远程调试对应用程序开发十分有用,那如何调试Hadoop源码?这里介绍如何用IDE远程调试Hadoop源码.本文以IntelliJ IDEA作为IDE,以调试Jobhistory WEB UI代码为例进 ...
- mysql 的S 锁和X锁的区别
共享锁和排它锁 MySQL的锁系统:shared lock和exclusive lock(共享锁和排他锁,也叫读锁和写锁,即read lock和write lock) 读锁是共享的,或者说是相互不阻塞 ...
- Linux经常使用命令(六) - mv
mv命令是move的缩写.能够用来移动文件或者将文件改名(move (rename) files),是Linux系统下经常使用的命令,经经常使用来备份文件或者文件夹. 1．命令格式: mv [选项] ...
- cocos2d-x -- removeChild
Test5::Test5() { CCSprite* sp1 = CCSprite::create(s_pPathSister1); CCSprite* sp2 = CCSprite::create( ...
- Rewrite MSIL Code on the Fly with the .NET Framework Profiling API
http://clrprofiler.codeplex.com/ http://blogs.msdn.com/b/davbr/archive/2012/11/19/clrprofiler-4-5-re ...
- JS页面跳转并及时刷新
"<script type='text/javascript'>alert('操作成功!');window.history.go(-2);window.close();</ ...
- ORACLE 新增记录 & 更新记录
开发中偶尔需要新增一条记录或修改一条记录的几个字段,语法中有微妙的区别. 由于不是经常写,久不写就忘记了,而又要重新查找或调试. 新增记录语法: --新增记录(仿照已有表记录)INSERT INTO ...
- python字符串转换成变量的几种方法
个人比较喜欢用第三种方法 var = "This is a string" varName = 'var' s= locals()[varName] s2=vars()[varNa ...
- django admin 或xdmin list_display search_fields list_filter 如果显示搜索外键或多对多字段
model class UserProfile(AbstractUser): nick_name = models.CharField(max_length=50, verbose_name=u&qu ...
- C语言 · 回形取数
基础练习 回形取数 时间限制:1.0s 内存限制:512.0MB 问题描述 回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过,则左转90度.一开始位于矩阵左上角,方向向 ...