JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div class="box"></div>

CSS

.box {
    position:relative;
    background-color:#7092BE;
    width:500px;/*sample*/
    height:150px;/*sample*/
    margin:0 auto;
}
.box:before {
    position: absolute;
    content:"";
    right: 100%;
    border-style: solid;
    border-color: transparent #880015 transparent transparent;
    top: 0;
    bottom: 0;
    border-width:75px;
}
.box:after {
    position: absolute;
    content:"";
    left: 0;
    border-style: solid;
    border-color: transparent transparent transparent #880015;
    top: 0;
    bottom: 0;
    border-width:75px;
}