/* 向上的箭头 */
.dot-top {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-top-width: 0;
border-style: dashed;
border-bottom-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向右的箭头 */
.dot-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
/* 向下的箭头 */
.dot-bottom {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向左的箭头 */
.dot-left {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-left-width: 0;
border-style: dashed;
border-right-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}

  

css写箭头的更多相关文章

  1. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  2. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  3. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  4. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  5. css写宽为30%的正方形

    如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...

  6. CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。

    CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场

  7. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  8. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  9. 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)

    <style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...

随机推荐

  1. 解析转换json xml 集合 ado

    json提取 string str = "[{\"JUDGE_RESULT\":\"B类\",\"JUDGE_RESULT\":\ ...

  2. Python的工具包[2] -> matplotlib图像绘制 -> matplotlib 库及使用总结

    matplotlib图像绘制 / matplotlib image description  目录 关于matplotlib matplotlib库 补充内容 Figure和AxesSubplot的生 ...

  3. [BZOJ 3108] 图的逆变换

    Link: BZOJ 3108 传送门 Solution: 样例教你做题系列 观察第三个输出为No的样例,发现只要存在$edge(i,k),edge(j,k)$,那么$i,j$的出边一定要全部相同 于 ...

  4. UVA 11990 ”Dynamic“ Inversion(线段树+树状数组)

    [题目链接] UVA11990 [题目大意] 给出一个数列,每次删去一个数,求一个数删去之前整个数列的逆序对数. [题解] 一开始可以用树状数组统计出现的逆序对数量 对于每个删去的数,我们可以用线段树 ...

  5. POJ 1511 Invitation Cards(单源最短路,优先队列优化的Dijkstra)

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 16178   Accepted: 526 ...

  6. 命令行解析函数:getopt/getopt_long

    参考: http://blog.csdn.net/zhangyang0402/article/details/5671410 http://www.cnblogs.com/gnuhpc/archive ...

  7. 远程访问CENTOS的MYSQL数据库设置

    远程访问CENTOS的MYSQL数据库设置 mysql -u root grant all privileges on *.* to root@'%'identified by 'root'; 后面的 ...

  8. SpannableString 转换局部字体大小,但在EditText测量之前设置内容,测量高度为,字体变小之前的高度

    public void setHint(@NonNull String hint, @Nullable CharSequence subHint) { this.hint = hint; if (su ...

  9. ESB 12种跑法

    ESB 12种跑法 请求响应: MQ-MQ             MQ-Webservice                Webservice-MQ     Webservice-Webservi ...

  10. Mac eclipse安装SVN javaHL not available的解决方法

    在Mac下安装Eclipse插件svnEclipse插件后,每次打开Eclipse都会弹出如下弹出框: 提示你本机缺少JavaHL Library. 选择Eclipse→偏好设置(preference ...