CSS 3实现奖牌效果

因为不同数字奖杯是不同颜色，所有决定用css写，实现的效果如图

HTML

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

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) translate(30%, -30px) rotate(45deg);
           width: 29px;
       }
   }
   ```