JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="http://fonts.googleapis.com/css?family=Quattrocento+Sans:700"></script>
<a href="#" id="btn"><span>Ask question</span></a>
<a href="#" id="btn"><span>Answer question</span></a>

CSS

html { background: #e1e1e1; }

#btn {
    clear: both;
    float: left;
    margin: 5px 10px; /* Arrow width margins on the sides */
    padding: 0px 15px;
    height: 38px;
    line-height: 38px;
    position: relative;
    background: #e1e1e1;
    border: 1px solid #ea4858;
    color: #ea4858;
    text-decoration: none;
    text-align: center;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    text-transform: capitalize;
}

#btn:before,
#btn:after,
#btn span:before,
#btn span:after {
    float: left;
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    border: 19px solid transparent; /* half of #btn height */
}

#btn span:before,
#btn span:after { z-index: 1; }

#btn:before {
    left: -11px; /* border-right + 1 */
    border-right: 10px solid #ea4858;
    border-left: 0;
}
#btn:after {
    right: -11px; /* border-right + 1 */
    border-left: 10px solid #ea4858;
    border-right: 0;
}
#btn span:before {
    left: -10px; /* border-right */
    border-right: 10px solid #e1e1e1;
    border-left: 0;
}
#btn span:after {
    right: -10px; /* border-right */
    border-left: 10px solid #e1e1e1;
    border-right: 0;
}