html - Fancy arrow on the footer -

i used http://cssarrowplease.com/ generate nice arrow footer need add 2 more lines , don't have clue how that.

what have far cssarrowplease:

css:

footer {     background-color: #239bd2;     position: relative;     margin-top: 50px; }  footer:after {     bottom: 100%;     left: 50%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(136, 183, 213, 0);     border-bottom-color: #239bd2;     border-width: 20px;     margin-left: -20px; } 

which generates this:

but need add 2 white lines ( kinda of arrow ) this:

i know way :after or :before have no skills in area. can guide me online resource? or maybe knows how it.

thank you,

florin

you can same way, changing size , color.

the problem can insert 2 pseudo-elements (::before , ::after), here need 3. added additional element.

footer {    background-color: #239bd2;    position: relative;    margin-top: 50px;  }  footer:before, footer:after, footer > .arrow {    content: "";    position: absolute;    bottom: 100%;    left: 50%;    margin-left: -20px;    border: 20px solid transparent;    border-bottom-color: #239bd2;    pointer-events: none;  }  footer:after {    margin-left: -8px;    border-width: 8px;  }  footer > .arrow {    margin-left: -11px;    border-width: 11px;    border-bottom-color: #fff;  }

<footer><span class="arrow"></span>footer</footer>