JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div id = "top_bar">
        <div  class = "trapezoid">
            <div class="redborder"></div> 
        </div>
</div>

CSS

.trapezoid{
    vertical-align: middle;
    position:absolute;
    border-bottom: 60px solid blue;
    border-left: 45px solid transparent;
    border-top-left-radius:30px;
    *border-top-right-radius:15px;
    *border-bottom-right-radius:3px;
    height: 0;
    width: 45%;
    display: inline-block;
    right:1px;
   
}

.redborder {
    background-color:red; 
    width:3px;
    height:70px;
    transform:rotate(37deg);
    -ms-transform:rotate(37deg);
    -moz-transform:rotate(37deg);
    -webkit-transform:rotate(37deg);
    -o-transform:rotate(37deg);
    position:relative;
    left:-18px;
    top:-10px;
}

#top_bar{
    background-color: #000;
    border-bottom: 1px solid #666;
    color: #222;
    position:fixed;
    left:0px;
    top: 0px;
    width:100%;
    overflow:hidden;
    height: 50%;
    font-weight: normal;
    white-space: nowrap;
    color: white;
    z-index:20; 
    line-height: 45px;
    min-width:320px;
    max-width: 320px;
    max-height:48px;
    border-radius: 5px;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; 
     cursor:pointer;
}