如何在div中从两侧创建箭头？

Question

我想创建一个这样的div结构，但我无法做到，有人能帮我吗？

我是这样被创造出来的吗？

​

​

如何创建这种类型的设计。我只能编写单边箭头。

​

.right-arrow {
    position: relative;
    padding: 15px;
}
.right-arrow:after {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.hiring-process1 .hiring-process .custom-process{
    color: #fff;
    text-align: center;
    border-radius: 15px;
    padding: 15px;
    margin: 25px;
}
.hiring-process1 .hiring-process .process1{
    background: #10145b;
}
.hiring-process1 .hiring-process .process1:after{
    border-left: 10px solid #10145b;
}
.hiring-process1 .hiring-process .process2{
    background: #1d2570;
    padding: 15px 15px 40px;
}
.hiring-process1 .hiring-process .process2:after{
    border-left: 10px solid #1d2570;
}

<div class="row">
    <div class="col-lg-2">
        <div class="process1 custom-process right-arrow">
            <p class="number">01</p>
            <p class="text">Identify the <br>hiring need</p>
        </div>
    </div>
    <div class="col-lg-2">
        <div class="process2 custom-process right-arrow">
            <p class="number">02</p>
            <p class="text">Write a JD</p>
        </div>
    </div>
</div>

​

我的设计：

​

​

添加z-index后：

​

​

Answer 1

您需要为right-arrow类设置z-index: 2;和border-right: 10px solid white;。

z-index将元素放在其他元素的前面或后面。

border向元素添加边框。

Answer 2

将zed索引设置为大于2的值应该可以解决此问题。