JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<div class="metric good"></div>

CSS

body {
    background: black;
    padding-top: 25px;
}

.metric {
    position: relative;
    height: 150px;
    width: 100%;
    background: #ffa700;
}

.metric:before, .metric:after {
    position: absolute;
    top: -25px;
    content: '';
    width: 50%;
    height: 25px;
}
.metric:before {
    left: 0px;
    background: linear-gradient(to right bottom, transparent 50%, #ffa700 50%);
    transform: translate3d(0,0,0);
}
.metric:after {
    right: 0px;
    background: linear-gradient(to left bottom, transparent 50%, #ffa700 50%);
    transform: translate3d(0,0,0);
}