CSS常见款式之绘图双箭头符■号的实例编码

2021-03-24 04:22 jianzhan

一、数次启用单箭头符号

完成了单箭头符号–就非常容易完成双箭头符号了,前文早已详细介绍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;
}

实际效果图以下:

双三角遮盖这类方法也可以立即绘图双箭头符号,可是完成较为不便,比不上外框转动方法好完成也不讲了

小结

到此这篇有关CSS常见款式之绘图双箭头符号的实例编码的文章内容就详细介绍到这了,大量有关css绘图双箭头符号內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!