Bootstrap4 Form Wizard Navigation CSS – Twitter bootstrap

I’m trying to create a form wizard in Twitter’s Bootstrap 4 framework.
I want its nav in the modal’s header, and buttons in the modal’s footer.
I am not able to create arrows with CSS like this: https://codepen.io/tiagorigoletto/pen/HCtDE.
JSFiddle link: https://jsfiddle.net/kirtan3d/hxLfs20z/

Here’s my HTML code:

<div class="modal" id="registrationModal" style="position: relative; display: block; width: 700px;">
    <div class="modal-dialog modal-lg" role="document">
        <div id="bs4wizard" class="modal-content">
            <div class="box-head box-head-accent-2" style="position: absolute;"></div>
            <div class="modal-header">
                <nav id="wizardNav" class="nav">
                    <a class="nav-link active" href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                        Confirm Mobile
                    </a>
                    <a class="nav-link disabled" href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                        Personal Information
                    </a>
                    <a class="nav-link disabled" href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                        Business Information
                    </a>
                </nav>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="wizardTab" class="tab-content">
                    <div class="tab-pane fade show active" role="tabpanel" id="step1">
                        <h3>Step 1</h3>
                        <p>This is step 1</p>
                    </div>
                    <div class="tab-pane fade" role="tabpanel" id="step2">
                        <h3>Step 2</h3>
                        <p>This is step 2</p>
                    </div>
                    <div class="tab-pane fade" role="tabpanel" id="step3">
                        <h3>Step 3</h3>
                        <p>This is step 3</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div id="wizardBtn">
                    <button type="button" class="btn btn-secondary prev-step">Back</button>
                    <button type="button" class="btn btn-secondary skip-step">Skip</button>
                    <button type="button" class="btn btn-primary next-step">Save and Continue</button>
                </div>
            </div>
        </div>
    </div>
</div>

Here is my CSS:

#wizardNav a {
    color: #fff;
    background: #0275d8;
    border: solid 1px #025ead;
    border-width: 1px 0;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.30);
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.20);
}
#wizardNav a:first-child {
    border-radius: 0.3rem 0 0 0.3rem;
    border-right:0;
}
#wizardNav a:last-child {
    border-radius: 0 0.3rem 0.3rem 0;
    border-left:0px;
}
#wizardNav a.disabled {
    opacity: 0.6;
    background-color: #666;
    border-color:#555;
}
#wizardNav a.pass {
    background-color: #5cb85c;
    border-color: #5cb85c;
}
#wizardNav a:hover {
    background-color: #025aa5;
    border-color: #01549b;
}
#wizardNav a.disabled:hover {
    opacity: 0.6;
    background-color: #666;
    border-color:#555;
}
#wizardNav a.pass:hover {
    background-color: #449d44;
    border-color: #419641;
}

#wizardNav a::after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: transparent;
    border-left-color: #fff;
}
#wizardNav a::after {
    border-left-color: #2b2b2b;
    border-width: 18px;
    margin-top: -27px;
    margin-left: 126px;
}

And simple jquery:

if required

$(".next-step,.skip-step").click(function (e) {
    var $activeN = $('#wizardNav .nav-link.active').next();
    $activeN.removeClass('disabled');
    $activeN.prev().addClass('pass');
    $activeN.trigger("click");
});
$(".prev-step").click(function (e) {
    var $activeP = $('#wizardFormNav .nav-link.active').prev();
    $activeP.trigger("click");
    if ($activeP.hasClass('active')) {
        $activeP.removeClass('pass');
    } else {
        $activeP.addClass('pass')
    };
});