JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">    
    <div class="image">
        <img src="http://userserve-ak.last.fm/serve/126s/80380183.png" />
    </div>
    <div class="text"></div>
</div>

CSS

.box {
    background:#FFF;
}

.box:after {
    content:"";
    display:block;
    clear:both;
}

.box .text {
    box-sizing:border-box;
    padding:10px;
    background:#444;
    height:116px;
    margin-right:126px;
    color:#FFF;
}

.box .image {
    position:relative;
    float:right;
    line-height:0;
}

.box .image:after, 
.box .image:before {
    position:absolute;
    left:0;
    bottom:0;
    content:"";
    display:block;
    width:50%;
    height:0;
    background:transparent;
    box-sizing:border-box;
    border-bottom: 10px solid #FFF; 
    border-right: 10px solid transparent;
}

.box .image:before {
    left:auto;
    right:0;
    border-right:none;
    border-bottom: 10px solid #FFF; 
    border-left: 10px solid transparent;
}