JSFiddle - React, Tailwind, and code Playground

by Kirill Kosonogov

HTML

<div class="block block1"><span>первый<span></div>
<div class="block block2"><span>второй<span></div>

CSS

.block{
    width: calc(50% - 15px);
    height:30px;
    background: #f0f;
    float:left;
    text-align:center;
    line-height: 30px;
}
.block1{
    background:#0ff;
    position:relative;
    margin-right:30px;
}
.block1:after{
    content:"";
    display:block;
    top:0;
    left:100%;
    border-left:15px solid #0ff; 
    border-top:15px solid #0ff;
    border-right:15px solid #f0f;
    border-bottom:15px solid #f0f;
    position:absolute;
    width:0;
    height:0;
}
span{
    position:relative;
    z-index:1;
}