JSFiddle - React, Tailwind, and code Playground

by glsee

HTML

<ul id="css3">
    <li><a href="#">Photoshop mockup</a></li>
    <li><a href="#">CSS background-image</a></li>
    <li><a href="#">CSS3 border-radius</a></li>
    <li><a href="#">CSS3 transparent borders</a></li>
    <li><a href="#">HTML5 Canvas</a></li>
</ul>

CSS

#css3 a {
    padding: 4px;
    display: inline-block;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#C9E5F5), to(#AED8F0));
    background-image: -webkit-linear-gradient(top, #C9E5F5, #AED8F0);
    background-image: -moz-linear-gradient(top, #C9E5F5, #AED8F0);
    background-image: -ms-linear-gradient(top, #C9E5F5, #AED8F0);
    background-image: -o-linear-gradient(top, #C9E5F5, #AED8F0);
    background-image: linear-gradient(to bottom, #C9E5F5, #AED8F0);
    text-decoration: none;
    text-transform: uppercase;
    margin: 5px 5px 5px 20px;
    display: inline-block;
    position:relative;
}

#css3 a:before{
    content:""; /* Empty element */
    position:absolute;
    top:0;
    left:-8px;
    border-color:transparent #c9e5f5 transparent transparent;
    border-style:solid;
    border-width:12px 8px 12px 0; /* 24px high, 8px wide */
}

#css3 a:after {
    content:"";
    position: absolute;
    top:0;
    left:-8px;
    border-color:transparent #AED8F0 transparent transparent;
    border-style:solid;
    border-width:13px 9px 13px 0;
}