菲洛嘉青春动能素135HA FILLMED® NCTF 135HA LED指示灯的常见故障分析 智微智能 Elkhartlake K075终端,零售产业新选择 天空蓝拓客管理系统详细介绍版 muso公链项目 天使计划 是什么?[秘] 独家揭秘最前沿的家装“黑科技”——掌赋 天博体育欧洲杯特辑,东道主法兰西的失意2016 亚马逊的送货侦察员 学习听起来像挡泥板 Google Comics Factory使ML变得容易 笑着说-男性或女性 Amazon Rekognition中更好的人脸检测 关于Spaun的真相-大脑模拟 两个聊天机器人彼此聊天-有趣又怪异 GANPaint:将AI用于艺术 WCF和WF给予社区 从耳朵到脸 所有神经网络的深层缺陷 蠕虫在尾巴上平衡杆子 Kickstarter上的OpenCV AI套件 TensorFlow-Google的开源AI和计算引擎 众包取代新闻工作者 Google的DeepMind学会玩街机游戏 哑机器人V智能机器人 .NET与.NET 5融为一体 Google的深度学习-语音识别 LInQer将.NET LINQ移植到Javascript 机器人TED演讲-新的图灵测试? GAN的发明者加入苹果 您的智能手机会监视您键入的内容 人工智能帮助改善国际象棋 Zalando Flair NLP库已更新 TensorFlow 1.5包含移动版本 AlphaGo输了一场比赛-比分3-1 虚拟机器学习峰会 Microsoft开源AI调试工具 SharePoint走向移动 F#4.0发出文化变革的信号 克里斯蒂拍卖AI艺术品 人工智能如何区分 Facebook在蒙特利尔的新AI实验室 Mozilla想要您的声音 微软使用极深的神经网络赢得ImageNet 建立AI合作伙伴关系 .NET Core 3-Microsoft几乎回到了起点 神经网络-更好的销售商? Google使用AI查找您的住所 虹膜-适用于Android的Siri证明苹果没有优势 TensorFlow 2提供更快的模型训练 深度学习研究人员将为Google工作
您的位置:首页 >大数据 >

CSS常用样式(二):绘制双箭头

序言:总结一些常用CSS样式,方便以后使用

目录

一、多次调用单箭头二、直接绘制双箭头

一、多次调用单箭头

实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。
1、边框旋转单箭头实现

.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、多次调用单箭头

<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;}

效果图如下:
在这里插入图片描述
双三角覆盖这种方式也能直接绘制双箭头,但是实现比较麻烦,不如边框旋转方式好实现就不讲了,请大家多多指教,能get到知识点不要忘了关注点个赞~

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。