JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="shield">Down (default)</div>
<div class="shield shield-up">Up</div>

CSS

/* the dark grey and white background is from their style guide and is here so I can get the size, shape and alignment right */
.shield {
    height: 160px;
    background: #ccc;
    position: relative;
}
.shield-up {
    position: absolute;
    top:455px; left:0; right:0;
    width:100%;
    background: #cc4488;
}
.shield:hover {
    background: red;
}
.shield:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(100% - 200px);
    left: calc(50% - 158px);
    width: 316px;
    height: 316px;
    background: inherit;
    border-radius: 0% 100% 0% 100%;
    clip-path: polygon(0% 130%, 130% 0%, 100% 100%, 100% 100%);
    transform: scale(1, 0.56) rotate(45deg);
}
.shield-up:after {
    top: -118px;
    clip-path: polygon(0% 70%, 70% 0%, 0% 0%, 0% 0%);
}





body {
   margin:0px;...