如何在CSS中制作左右箭头？

Question

我有一个截图如下所示，我必须在HTML / CSS中复制。在下面的屏幕截图中，我无法在正方形之间制作彩色左右箭头。

此时，我可以在fiddle 中复制此内容而不使用左右箭头。

我用来制作一系列小方块的CSS代码片段是：

var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
    iframes[i].remove();
}

问题陈述：

我想知道我应该在小提琴中添加什么CSS代码，以便在小提琴中显示彩色左右箭头 在正方形之间。

Answer 1

您可以通过以下HTML特殊字符执行此操作：

＆＃13;

＆＃13;

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  background-color: rgb(238, 238, 238);
  flex-wrap: wrap;
}

.squares .square {
  width: 200px;
  text-align: center;
  height: 200px;
  background-color: white;
  border-radius: 15px;
}

.squares .square p
{
	text-align: center;
	vertical-align: bottom;
}
.arrows {
	text-align:center;
}
.arrows span {
	display:block;
	font-size:48px;
	line-height:32px;
	color:green;
	font-weight:bold;
}
.arrows span:first-child {
	color:#C90;
}

＆＃13;

<div class="squares">
    <div class="square"><p>Franchise Hub Hierarchy</p><img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/></div>
    <div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
    <div class="square"><p>System wide user permissions</p><img src="https://s7.postimg.cc/6ronxc7a3/Layer_33.png" alt=""/></div>
    <div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
    <div class="square"><p>Custom Corporate Branding</p><img src="https://s7.postimg.cc/wn8egkbor/Layer_46.png" alt=""/></div>
    <div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
    <div class="square"><p>Configurable Workflow</p><img src="https://s7.postimg.cc/k8lmg8rwb/Layer_47.png" alt=""/></div>
    <div class="arrows">
        <span>&rarr;</span>
        <span>&larr;</span>
    </div>
    <div class="square"><p>Orders, C.R.M. and P.O.S</p><img src="https://s7.postimg.cc/9yj7h0hgb/Shape_33.png" alt=""/></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是治愈CSS和解决您问题的最简单方法 我已经为你完成了这个，只需在每个方格div之间添加一个div

<div class="arrowWrapper">
  <span class="arrow redArrow"></span><br>
  <span class="arrow greenArrow"></span>
</div>

这个css代码：

.arrow {
  display:block;
  height: 2px;
  margin: 3px 0;
  width: 35px;
  position: relative;
}
.arrow.redArrow {background-color: red;}
.arrow.greenArrow {background-color: green;}
.arrowWrapper { margin-right: -20px; margin-left: -20px;}
.arrow.redArrow:after{
 position: absolute;
 content: "";
 height: 2px;
 width: 12px;
 background: red;
 right: -1px;
 transform: rotate(45deg);
 top: -4px;
}
.arrow.redArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(135deg);
top: 4px;
}
.arrow.greenArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(135deg);
top: -4px;
}
.arrow.greenArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(45deg);
top: 4px;
}

完整代码位于以下代码段中<享受

＆＃13;

＆＃13;

.squares {
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
}

.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}

.squares .square p
{
text-align: center;
vertical-align: bottom;
}
.arrow {
display:block;
height: 2px;
margin: 3px 0;
width: 35px;
position: relative;
}
.arrow.redArrow {background-color: red;}
.arrow.greenArrow {background-color: green;}
.arrowWrapper { margin-right: -20px; margin-left: -20px;}
.arrow.redArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(45deg);
top: -4px;
}
.arrow.redArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(135deg);
top: 4px;
}
.arrow.greenArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(135deg);
top: -4px;
}
.arrow.greenArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(45deg);
top: 4px;
   }

＆＃13;

<div class="squares">
    <div class="square"><p>Franchise Hub Hierarchy</p><img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/></div>
<div class="arrowWrapper">
    
    
    <span class="arrow redArrow"></span><br>
    <span class="arrow greenArrow"></span></div>
    <div class="square"><p>System wide user permissions</p><img src="https://s7.postimg.cc/6ronxc7a3/Layer_33.png" alt=""/></div>
    <div class="square"><p>Custom Corporate Branding</p><img src="https://s7.postimg.cc/wn8egkbor/Layer_46.png" alt=""/></div>
    <div class="square"><p>Configurable Workflow</p><img src="https://s7.postimg.cc/k8lmg8rwb/Layer_47.png" alt=""/></div>
	<div class="square"><p>Orders, C.R.M. and P.O.S</p><img src="https://s7.postimg.cc/9yj7h0hgb/Shape_33.png" alt=""/></div>
</div>

＆＃13;

＆＃13;

＆＃13;