JSFiddle - React, Tailwind, and code Playground

by itdiver

HTML

<body>
<div id="triangle-up"></div>
</body>

CSS

body{
background-color:black;
}
#triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid red;
top: 6px;
position: absolute;
vertical-align: bottom;
margin-left: 260px;
}

#triangle-up::before{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid white;
z-index: -1;
left: -25px;
bottom: -43px;
}

#triangle-up::after{
content: '777';
margin: 20px 0px 0px -20px;
position: absolute;
text-align: center;
color: white;
width: 40px;
}