在很多网站都见过这样的箭头
，之前我一直以为是图片，直到今天才知道原来可以用css做。开始看代码没太看懂，后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)
先看代码：
HTML部分就是一个单纯的div。
.sanjiao{
width:0px;
height:0px;
overflow:hidden;
border-width:10px;
border-color:transparent transparent blue transparent;
border-style:dashed dashed solid dashed;
}
咋一看我确实没明白原因。(看懂的后面可以忽略)
*****************************************************************************************************************
一步步分析：
1、画div
.sanjiao{
width:30px;
height:30px;
background-color:black;
}
(这一步看不懂的麻烦回去复习css)
2、给边框，分开给
.sanjiao{
width:30px;
height:30px;
background-color:black;
border-top:solid red 20px;
border-left:solid blue 20px;
border-bottom:solid yellow 20px;
border-right:solid green 20px;
}
(相信聪明的童靴马上就看明白了，我也是在这才明白)
3、去掉中间的div
.sanjiao{
width:;
height:;
border-top:solid red 20px;
border-left:solid blue 20px;
border-bottom:solid yellow 20px;
border-right:solid green 20px;
}
(是不是已经看懂了)
4、优化代码
.sanjiao{
/* 设定div大小 */
width:;
height:;
/* 防溢出，稳固兼容性 */
overflow:hidden;
/* 箭头尺寸 */
border-width:10px;
/* 给箭头着色，四个值分别是边框的四个方向，箭头的方向正好相反 */
border-color:blue transparent transparent transparent;
/* 为了兼容性，最好把四个值都补上，需要的方向设实线，其他方向虚线 */
border-style:solid dashed dashed dashed;
}
搞定，最后的优化注释已经很详细了。
看到这儿还看不懂，不好意思 请找地儿充值IQ。
用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
div css 伪类 不固定图片大小 居中， css div 实现三角形
div css 伪类 不固定图片大小 居中
纯CSS绘制的三角形箭头图案【原创】
参考:/css-triangles/ 使用上下左右的三角形箭头标志,直接用css即可完成,直接附上代码. css: div#up { width: 0px; ...
CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是用css创建一个三角形,并简述原理.当然对于我来说画一个三角形是 ...
div+css实现导航示意箭头
1.Div的宽高为100
纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
纯CCS绘制三角形箭头图案
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...
css简单实现带箭头的边框
原文地址 /artic... css简单实现带箭头的边框 普通边框
用纯css画个三角形
用纯css画个三角形以下是源代码: 始"->"运行"中输 ...
[业界良心系列] OI资料分享
正式退役辣....混吃等死了这么久以后....终于也是必然的结果吧.... 分享一些资料: 链接:/s/1c1SRFmo 密码:bcfc 有一些资料有版权, 如 ...
主机与虚拟机都可以上网，但是互相ping不通
问题:主机与虚拟机都可以上网,但是互相ping不通 可能:相关入站规则没有启用 解决:第4步双击后,打勾设置“已启用”
web页面弹出窗口代码大全
//-----------按钮提示框----------//
