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

Wesley13
• 阅读 839

序言:总结一些常用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;
}

效果图如下:
CSS常用样式(二):绘制双箭头
2、多次使用单箭头

<div>
    <span class="arrow-right"/>
    <span class="arrow-right"/>
</div>

效果图如下:
CSS常用样式(二):绘制双箭头

二、旋转边框直接绘制双箭头

之前通过::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常用样式(二):绘制双箭头
双三角覆盖这种方式也能直接绘制双箭头,但是实现比较麻烦,不如边框旋转方式好实现就不讲了,请大家多多指教,能get到知识点不要忘了关注点个赞~

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
java反射, 不看你可别后悔
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
3年前
Native memory allocation (mmap) failed to map xxx bytes for committing reserved memory
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
Spring Boot 2下使用Feign找不到@EnableFeignClients的解决办法
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2
Wesley13 Wesley13
3年前
Java8中的LocalDateTime工具类
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
Oracle一张表中实现对一个字段不同值和总值的统计(多个count)
需求:统计WAIT\_ORDER表中的工单总数、未处理工单总数、已完成工单总数、未完成工单总数。表结构:为了举例子方便,WAIT\_ORDER表只有两个字段,分别是ID、STATUS,其中STATUS为工单的状态。1表示未处理,2表示已完成,3表示未完成总数。 SQL:  1.SELECT   2