How to create arrow in div from both side?

user_12624774 0
Viewed 130

I want to create a div structure like this but I am unable to do that, Can someone help me?

I am created something like this?

enter image description here

How to Create this type of design. I am able to code only sigle side arrow.

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

My Design :

enter image description here

After Adding z-index :

enter image description here

css html
2 Answers

You need to set z-index: 2; and border-right: 10px solid white; for the right-arrow class.

z-index places elements in front of or behind other elements.

border adds a border to an element.

user_67604520

Setting the zed index to a value higher than 2 should fix this issue.

user_97859650
Related