如何在css中制作左右箭头?

闪光

我有一个屏幕截图,如下所示,我必须在 HTML/CSS 中复制它。在下面的屏幕截图中,我无法在方块之间制作彩色的左右箭头在此处输入图片说明


此时,我可以在没有彩色左右箭头的情况下小提琴中 复制它

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

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



问题陈述:

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

哈尼夫

您可以通过 HTML 特殊字符来实现,如下所示:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章