JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="triangle">
        <div id="text">Bestellen</div>
    </div>
</div>

CSS

#container {
position:relative;
width: 215px;
height: 320px;
display: inline-block;
vertical-align: top;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 6px;
margin-top: 6px;
text-align: center;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow:3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
z-index:5;
overflow:hidden;
}

#triangle {
    height: 75px;
    width: 175px;
    background-image: url(http://i42.tinypic.com/2r7bj8p.png);
    border-bottom-right-radius: 30px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#text {
    color: white;
    font-family: sans-serif;
    position: absolute;
    bottom: 30px;
    right: 20px;
    -webkit-transform: rotate(-24deg);
    -moz-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    -o-transform: rotate(-24deg);
}