带你玩转css中各种方向小箭头


本文摘自PHP中文网,作者烟雨青岚,侵删。

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

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

梯形代码:
梯形

1

2

3

4

5

6

7

8

9

html:

<div class="arrow"></div>

css:

arrow{

width:10px;

height:10px;

border:10px solid #000;

border-left-color:orange;

}

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

1

2

3

4

5

6

7

8

9

html:

<div class="arrow"></div>

css:

arrow{

width:0;

height:0;

border: 10px solid transparent;

border-left-color: orange;//左箭头

}

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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:'';

}

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

阅读剩余部分

相关阅读 >>

css实现菜单按钮动画的代码示例

html如何选择li的偶数列

css modules是啥子东西?一起来了解一下!

css如何关闭浮动

css line-height属性怎么用

style标签怎么用?

css如何实现圆角内凹效果

css中隐藏的是什么命令

css怎么设置margin

利用css实现鼠标悬停效果

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...