JSFiddle - React, Tailwind, and code Playground
CSS
div {
width: 118px; /* 118 = rectangle width - 2 */
height: 33px; /* 33 = shape height - 2 */
border: 1px solid #007bff;
background-color: white;
}
div:before {
content: '';
border-right: 30px solid transparent; /* 30 = triangle width */
border-bottom: 35px solid #007bff; /* 35 = shape height */
float: left;
margin-left: 119px; /* 121 = rectangle width - 1 */
margin-top: -1px; /* always 1*/
}
div:after {
content: '';
border-right: 29px solid transparent; /* 29 = triangle width - 1 */
border-bottom: 33px solid white; /* 33 = shape height - 2 */
float: left;
margin-left: 118px; /* 120 = rectangle width - 2 */
margin-top: -34px; /* 34 = shape height - 1 */
}