block with bottom arrow

HTML

<script src="//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&amp;subset=latin,cyrillic-ext,cyrillic"></script>
<link rel="stylesheet" href="//yui.yahooapis.com/combo?pure/0.3.0/base-min.css">
<link rel="stylesheet" href="//yui.yahooapis.com/combo?pure/0.3.0/base-min.css">
<div class="splash-novelty">новинка</div>

CSS

body {background: #333;}
.splash-novelty {
    display: inline-block;
    position: absolute;
    left: 16%;
    top: 0;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 12px;
    font-weight: 700;
    background: #8bc807;
    color: #fff;
    text-transform: uppercase;
    padding: 5px 10px;
}
.splash-novelty:before, .splash-novelty:after {
    position: absolute;
    top: 100%;
    content: '';
    width: 50%;
    height: 7px;
}
.splash-novelty:before {
    left: 0px;
    background: linear-gradient(to right top, transparent 40%, #8bc807 50%);
}
.splash-novelty:after {
    right: 0px;
    background: linear-gradient(to left top, transparent 40%, #8bc807 50%);
}