css3上箭头怎么写,纯css作箭头
* {
padding:0;
margin:0;
}
.box {
width:800px;
margin:10px auto;
background:#fff;
}
.box p {
color:#333;
}
.arrow_box {
width:30px;
height:30px;
margin:20px 0;
position:relative;
cursor:pointer;
}
/*右箭头*/
.right {
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
/*border:1px solid blue;
*/
}
.right-arrow1,.right-arrow2 {
width:0;
height:0;
display:block;
position:absolute;
left:0;
top:0;
border-top:10px transparent dashed;
border-right:10px transparent dashed;
border-bottom:10px transparent dashed;
border-left:10px #fff solid;
overflow:hidden;
}
.right-arrow1 {
left:1px;
/*重要*/
border-left:10px #333 solid;
}
.right-arrow2 {
border-left:10px #fff solid;
}
/*左箭头*/
.left {
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
z-index:2;
/*兼容ie8-*/
/*border:1px solid blue;
*/
}
.left-arrow1,.left-arrow2 {
width:0;
height:0;
display:block;
position:absolute;
left:0;
top:0;
z-index:5;
/*兼容ie8-*/
border-top:10px transparent dashed;
border-left:10px transparent dashed;
border-bottom:10px transparent dashed;
border-right:10px white solid;
overflow:hidden;
}
.left-arrow1 {
border-right:10px #333 solid;
}
.left-arrow2 {
left:1px;
/*重要*/
border-right:10px #fff solid;
}
/*上箭头*/
.top {
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
z-index:2;
/*兼容ie8-*/
/*border:1px solid blue;
*/
}
.top-arrow1,.top-arrow2 {
width:0;
height:0;
display:block;
position:absolute;
left:0;
top:0;
z-index:5;
/*兼容ie8-*/
border-top:10px transparent dashed;
border-left:10px transparent dashed;
border-right:10px transparent dashed;
border-bottom:10px white solid;
overflow:hidden;
}
.top-arrow1 {
border-bottom:10px #333 solid;
}
.top-arrow2 {
top:1px;
/*重要*/
border-bottom:10px #fff solid;
}
/*下箭头*/
.bottom {
width:20px;
height:20px;
position:absolute;
left:0;
top:0;
z-index:2;
/*兼容ie8-*/
/*border:1px solid blue;
*/
}
.bottom-arrow1,.bottom-arrow2 {
width:0;
height:0;
display:block;
position:absolute;
left:0;
top:0;
z-index:5;
/*兼容ie8-*/
border-bottom:10px transparent dashed;
border-left:10px transparent dashed;
border-right:10px transparent dashed;
border-top:10px white solid;
overflow:hidden;
}
.bottom-arrow1 {
top:1px;
/*重要*/
border-top:10px #333 solid;
}
.bottom-arrow2 {
border-top:10px #fff solid;
}
.box .arrow {
width:0px;
height:0px;
border:10px solid #333;
margin:10px;
}
/*右箭头*/
.box .arrow_you2 {
border-bottom:10px transparent solid;
border-right:10px transparent solid;
border-left:10px #333 solid;
border-top:10px transparent solid;
}
/*左箭头*/
.box .arrow_zuo2 {
border-bottom:10px transparent solid;
border-left:10px transparent solid;
border-right:10px #333 solid;
border-top:10px transparent solid;
}
/*上箭头*/
.box .arrow_top2 {
border-left:10px transparent solid;
border-right:10px transparent solid;
border-bottom:10px #333 solid;
border-top:10px transparent solid;
}
/*下箭头*/
.box .arrow_bottom2 {
border-bottom:10px transparent solid;
border-right:10px transparent solid;
border-top:10px #333 solid;
border-left:10px transparent solid;
}
css3上箭头怎么写,纯css作箭头相关推荐
- 快递信息css3手风琴代码_用纯CSS实现手风琴效果的示例代码
昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求.需要把一组图片形成手风琴的展示效果.认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求.今天趁着空闲时间稍微梳理了一下 ...
- html5网页仿写,纯CSS代码模仿绘制蚂蚁庄园页面
CSS的图形绘制功能还是很强大的,今天就用CSS模仿一个支付宝蚂蚁庄园的页面,当然,说是模仿,因为是电脑页面,又因为时间关系,只能模仿个大概.先把效果图贴出来,截图只能截取静态效果,动画看不出来,大家 ...
- 纯css实现箭头,上下左右的箭头
右箭头: <style> #toRight{ border: 10px solid #FFF; bo ...
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转
无标题文档 b{ position:absolute; right:10px; top:7px; width:0; height:0; border-width:4px 4px; border-sty ...
- html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
- 纯css写出来的小彩虹
文章目录 下面是效果图 下面是源代码 学到的知识点 今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下 源代码链接 下面是效果图 下面是源代码 <head><m ...
- 纯css实现扁平化360卫士logo demo
前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像 ...
- html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标
ICONO – 仅一个标签实现的纯CSS图标 1月 29, 2015 评论 Sponsor 图标在WEB和APP设备上是很常用的设计元素,有些网站为了兼容高分辨率的显视屏,比如苹果Retina设备,一 ...
- html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上
HTML里面有一个标签fieldset,可以实现文字写在边框上,今天项目想实现一个类似效果,并要求自定义边框上文字距离一侧的距离.下面青岛星网跟大家分享下纯CSS的实现方法. 先看下效果 HTML部分 ...
最新文章
- 记住密码以及Android 列表的操作
- 数据库索引数据结构总结——ART树就是前缀树
- cogs 539. 牛棚的灯
- stm32 Bootloader设计(YModem协议)
- Flutter入门：Button
- ZigBee协议栈简介
- 当不知轴承型号时如何寻找轴承故障频率_知课堂 | 快速计算轴承特征频率
- 1、STVD和STVP的使用及串口烧写程序教程
- Pytorch之Optim（优化器）
- python常用颜色表示_Python命令行的常用颜色,python,字体
- 电脑cd,CD光盘如何翻录在电脑上 将CD复制到电脑上步骤的方法有哪些
- TRACE32——List源代码查看
- openjdk环境中java项目启动慢的问题
- 神奇相机将照片变文字 超大相册搜图无压力
- 学习 第2章：备份与恢复选项
- JavaScript实现点击按钮显示当前时间
- H5移动端实现手机震动效果
- MMC5603NJ地磁传感器（指南针示例）
- 基于web的科研项目管理系统设计与实现
- 计算机系的对联,首个计算机对联系统问世
热门文章
- Android自定义控件开发入门与实战（11）Xfermode，Android程序员如何有效提升学习效率
- 小米手机3，小米手机4 官方移动稳定版最新 ROM V6.7.1.0.KXDCNCH
- -source 1.6 中不支持 diamond 运算符
- 郭秀闲：我如何看待埃维诺的未来发展
- Errors集锦-数据库-file /usr/share/mysql/czech/errmsg.sys from install of mysql-community-common-5.7.16-1.
- python读取excel成绩表，并设置柱状图
- （七）VBS变量、数组使用
- 浏览器内核 css浏览器的兼容性写法
- 多目标追踪相关 + reid
- ios绘图教程（原文http://www.cocoachina.com/industry/20140115/7703.html）