本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下使用纯CSS绘制双箭头效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。(学习视频分享:css视频教程)
一、多次调用单箭头
实现了单箭头~~就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。
1、边框旋转单箭头实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .arrow- right {
height : 120px ;
width : 30px ;
display :inline- block ;
position : relative ;
}
.arrow- right ::after {
content : "" ;
height : 60px ;
width : 60px ;
top : 12px ;
border-width : 8px 8px 0 0 ;
border-color : blue ;
border-style : solid ;
transform: matrix( 0.71 , 0.71 , -0.71 , 0.71 , 0 , 0 );
position : absolute ;
}
|
效果图如下:
2、多次调用单箭头
1 2 3 4 | < div >
< span class = "arrow-right" />
< span class = "arrow-right" />
</ div >
|
效果图如下:
二、直接绘制双箭头
之前通过::after伪元素绘制单箭头,现在再加上::before伪元素再绘制一个单箭头就实现纯CSS绘制双箭头了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .arrow- right {
height : 120px ;
width : 30px ;
display :inline- block ;
position : relative ;
}
.arrow- right ::before {
content : "" ;
height : 60px ;
width : 60px ;
top : 12px ;
left : 30px ;
border-width : 8px 8px 0 0 ;
border-color : blue ;
border-style : solid ;
transform: matrix( 0.71 , 0.71 , -0.71 , 0.71 , 0 , 0 );
position : absolute ;
}
.arrow- right ::after {
content : "" ;
height : 60px ;
width : 60px ;
top : 12px ;
border-width : 8px 8px 0 0 ;
border-color : blue ;
border-style : solid ;
transform: matrix( 0.71 , 0.71 , -0.71 , 0.71 , 0 , 0 );
position : absolute ;
}
|
效果图如下:
双三角覆盖这种方式也能直接绘制双箭头,但是实现比较麻烦,不如边框旋转方式好实现就不讲了。
更多编程相关知识,请访问:编程教学!!
以上就是纯CSS如何绘制双箭头(代码示例)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css中font属性能不按顺序吗
css border-top-width属性怎么用
css怎么设置文字只读且不可复制
div css怎么实现隐藏滚动条
css unicode-bidi属性怎么用
css align-content属性怎么用
css如何实现不换行
css盒子模型尺寸如何计算
怎样在外连接css文件
css如何控制输出字数
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 纯CSS如何绘制双箭头(代码示例)