时间:2021-05-08
一、多次调用单箭头
实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。
1、边框旋转单箭头实现
效果图如下:
2、多次调用单箭头
<div> <span class="arrow-right"/> <span class="arrow-right"/></div>效果图如下:
二、旋转边框直接绘制双箭头
之前通过::after伪元素绘制单箭头,现在再加上::before伪元素再绘制一个单箭头就实现纯CSS绘制双箭头了。
.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绘制双箭头内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
常用的DIV+CSS的基本框架结构但不推荐都放一个div里css样式代码:程序代码复制代码代码如下:*{margin:0px;pad
化表单,效果如下:每个lebal有箭头的背景有焦点的lebal背景高亮示例如下:代码如下:复制代码代码如下:姓名邮件css代码:复制代码代码如下:#commen
今天无意中看到同事在使用Word文档时,箭头与我使用的不一样,所以找了找关于如何设置Word箭头样式的方法,现在介绍给朋友们。Word的箭头样式:设置所绘制图形
为了让页面在各不同浏览器之间显示效果一致,CSS样式清除和重置是前端开发必需要做的事情,结合前车之鉴,整理了份CSS重置样式代码供参考。复制代码代码如下:@ch
一、CSS1、css(name)访问第一个匹配元素的样式属性。返回值String参数name(String):要访问的属性名称示例:复制代码代码如下:$("p"