arrow - play around 2

arrow - play around 2

by pj_js15

HTML

<div class='mainContainer'>

    <div class='step'>
        <svg class='tail'>
            <g inkscape:groupmode="layer" id="layer2" inkscae:label="Layer 2" style="display:inline;">
                <path class='step-fill-done' 
                    style="fill-rule:evenodd;stroke:#fff;
                        stroke-width:0px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 
                    d="M 3.5923606,0.88734668 32.374886,31.329976 2.5340273,62.100937 H 38.209511 V 0.88734668 Z" 
                    id="path3340" inkscape:connector-curvature="0" fill='#39C3AC' sodipodi:nodetypes="ccccccc" />
            </g>
        </svg>
        <svg class='head'>
            <g inkscape:groupmode="layer" id="layer2" inkscae:label="Layer 2" style="display:inline;">
                <path class='step-fill-done' 
                    style="fill-rule:evenodd;stroke:#fff;stroke-width:0px;stroke-linecap:butt;
                        stroke-linejoin:miter;stroke-opacity:1" 
                    d="M 0.38599386,0.52172913 29.729053,31.329976 0.38599386,61.534142 Z" 
                    id="path3340" inkscape:connector-curvature="0" fill='#39C3AC' sodipodi:nodetypes="ccccccc" />
            </g>
        </svg>
        <div class='text'>Personal</div>
    </div>

</div>

CSS

* {
    background: #FFF;
}

svg.head {
    height: 60px;
    width: 29px;
    order: 3;
    position: absolute;
    //left: 119px;
    top: 5px;
    right: -28px;
}

svg.tail {
    height: 60px;
    width: 36px;
    order: 1;
    margin-top: 5px;
}

.step {
    display: flex;
    width: 160px;
    position: relative;
    margin-top: 20px;
}

.text {
    background: #39C3AC;
    text-align: center;
    flex-grow: 2;
    line-height: 3.4;
    height: 59px;
    margin-top: 6px;
    order: 2;
    z-index: 1;
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0 5px;
}