JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                <div class="box right-skew">
                    <p>Conheça nosso fretamento</p>
                </div>
                <div class="box-small left-skew"></div>
            </div>
            <div class="col-md-6">
                <div class="box right-skew"></div>
                <div class="box-small left-skew"></div>
            </div>
        </div>
    </div>
</div>

CSS

.box {
    width: 211px;
    height: 110px;
    background-color: #9c0e0e;
    -webkit-border-radius: 30px 0 0 0;
    border-radius: 30px 0 0 0;
    display: inline-block;
}

.right-skew {
    position: relative;
}

.right-skew:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -61px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 110px 61px 0 0;
    border-color: #9c0e0e transparent transparent transparent;
}

.box-small {
    width: 65px;
    height: 110px;
    background-color: #9c0e0e;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    display: inline-block;
    margin-left: 65px;
}

.left-skew {
    position: relative;
}

.left-skew:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -61px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 110px 61px;
    border-color: transparent transparent #9c0e0e transparent;
}