Since different digital trophies are different colors, I decided to use CSS to achieve the effect shown here

HTML

 
                    <i className="triangle"></i>
                    <div className="topNo">
                        <span className="num">11</span>
                    </div>
Copy the code

CSS

.topNo { background: Linear gradient(180deg, rgba(245, 210, 127, 1) 0%, rgba(255, 225, 161, 1) 6.527614569200764%, rgba(209, 158, 84, 1) 100%); height: 38px; left: 10px; position: absolute; top: 0; width: 38px; z-index: 11; } .triangle { height: 32px; overflow: hidden; width: 32px; &:before { background-color: #d19e54; border-radius: 4px; content: ''; height: 29px; left: 6px; position: absolute; top: 35px; Transform: scaleY(0.4) rotate(30%, -30px) rotate(45deg); width: 29px; }} ` ` `Copy the code