纯css实现各种方向小箭头

在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

梯形代码：

html:
<div class="arrow"></div>css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

把高宽设为0，其他边为透明颜色，三角形出来了：

html:
<div class="arrow"></div>css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。

html:
<div class="arrow">文字文字</div>css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:'';
}

现在追求平面化设计，还有另一种三角线箭头，更受欢迎。
设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好：

html:
<div class="arrow">文字文字</div>
CSS:
div {position: relative; }.arrow:after,.arrow:before {width: 0;height: 0;border: 10px solid transparent;border-left-color: orange;position: absolute;content: "";}.arrow:before{top: 0;left: 70px;//根据实际情况调整border-left-color: white;}

may you like it.

纯css实现各种方向小箭头相关推荐

html中展开的小箭头,纯css实现各种方向小箭头
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了梯形 Document .arrow { width: 10px; he ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
纯css写出来的小彩虹
文章目录下面是效果图下面是源代码学到的知识点今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下源代码链接下面是效果图下面是源代码 <head><m ...
css实现旋转的小箭头
思路: 先给div元素设置相对定位再给div的伪元素设置绝对定位,然后将其调整到相应的位置然后再利用c3里面的旋转知识,制作一个倒立的小箭头最后,当鼠标移到小三角上时,小三角旋转225度代码如 ...
css3 纯css实现绘制三角形、箭头效果
在前端工作中遇到三角形或者需要箭头的样式,我们不仅可以利用图片来实现效果,还可以利用css来实现. <div class="triangle"></div> ...
html 怎么做分屏效果,纯css实现水平方向分屏和垂直方向分屏
最近开发有这样一个需求,水平/垂直方向上的能够拖动.最开始采用操作dom的方式,但是卡顿现象明显,体验太差.思考问题是不是操作太频繁,导致卡顿,于是又尝试防抖与节流,效果还是不明显.突发想到,css有 ...
纯CSS实现提示框小三角
注:IE6不支持边框transparent,当设置成透明时显示为黑色.而当border-style为dotted或dashed时,点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(heig ...
小程序中纯CSS实现仿京东小优惠券图标
效果图: image.png 通常情况下可以用图片做背景图实现,但是,背景图如果用png,会出现被拉伸变形的问题,如果用svg会有兼容问题,同时也有被拉伸变形的问题,仔细分析,这个图标其实是一个圆角矩 ...

纯css实现各种方向小箭头

纯css实现各种方向小箭头相关推荐

最新文章

热门文章