JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>

CSS

div {
    height : 100px;
    width : 500px;
    background : blue;
    margin : 10px auto;
    position: relative;
}
div:first-child:before {
    position: absolute;
    top:0;
    right:100%;
    width:0;
    height:0;
    content:'';
    border:50px solid blue;
    border-top-color:transparent;
    border-left-color:transparent;
}

div:nth-child(2):after {
    position: absolute;
    top:0;
    left:100%;
    width:0;
    height:0;
    content:'';
    border:50px solid blue;
    border-bottom-color:transparent;
    border-right-color:transparent;
}