JSFiddle - React, Tailwind, and code Playground

by kianoshp

HTML

<script src="https://www.saltmoney.org/web_resources/themes/salt/images/bck_slant.png"></script>
<li class="blade-title">Test</li>

CSS

.blade-title {
    height: 30px;
    background-color: #ff0;
    padding: 5px 5px 5px 10px;
    font-size: 0.85em;
    list-style: none;
    width: 100px;
    background: #ff0 url('https://www.saltmoney.org/web_resources/themes/salt/images/bck_slant.png') top right no-repeat; /*fallback for IE */    
background: -webkit-linear-gradient(45deg, transparent 30px, #ff0 10px, #ff0 100%);
background: -moz-linear-gradient(45deg, transparent 30px, #ff0 10px, #ff0 100%);
background: -o-linear-gradient(45deg, transparent 30px, #ff0 10px, #ff0 100%);
background: linear-gradient(-135deg, transparent 30px, #ff0 10px, #ff0 100%);
}