JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubble">
    <img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>

CSS

.bubble {
    position:relative;
    width:241px; /*original 227 + 15 the width of the triangle*/
    height: 310px;
}
.bubble:before, .bubble:after {
    content:'';
    position:absolute;
    width:0;
    border-left:15px solid white; /*width of triangle*/
    left:0;
}
.bubble:before {
    top:0;
    height:128px;
    border-bottom:15px solid transparent; /*height of triangle*/
}
.bubble:after {
    top:143px; /*height of .bubble:before top attribute 128 + the height of the triangle 15*/
    bottom:0;
    border-top:15px solid transparent; /*height of triangle*/
}
.test {
    display:block;
    width:100%;
}