html div三角形,css+div打造三角形(箭头)

在很多网站都见过这样的箭头

，之前我一直以为是图片，直到今天才知道原来可以用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绘制的三角形箭头图案【原创】

参考:http://www.webhek.com/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简单实现带箭头的边框

原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框

用纯css画个三角形

用纯css画个三角形以下是源代码: 始"->"运行"中输 ...

[业界良心系列] OI资料分享

正式退役辣....混吃等死了这么久以后....终于也是必然的结果吧.... 分享一些资料: 链接:http://pan.baidu.com/s/1c1SRFmo 密码:bcfc 有一些资料有版权, 如 ...

主机与虚拟机都可以上网，但是互相ping不通

问题:主机与虚拟机都可以上网,但是互相ping不通  可能:相关入站规则没有启用  解决:第4步双击后,打勾设置“已启用”

web页面弹出窗口代码大全

//-----------按钮提示框----------//