CSS3做一个三角，并将文字旋转

mt

具体效果看图：

前端代码：

1. <div id="productStatus">
   
2.                                         <span>
   
3.                                                 <em>已上架</em>
   
4.                                         </span>
   
5.                                 </div>

复制代码

css：

1. #productStatus{
   
2.             position: absolute;
   
3.             right: 0;
   
4.             top: 0;
   
5.             height: 1.81rem;
   
6.             width: 1.81rem;
   
7.             display: flex;
   
8.             align-items: center;
   
9.             span{
   
10.                 position: absolute;
    
11.                 top: 0;
    
12.                 right: 0;
    
13.                 width: 0;
    
14.                 height: 0;
    
15.                 border-top: 1.81rem solid  #81D8D0;
    
16.                 border-left: 1.81rem solid transparent;
    
17.                 em{
    
18.                     position: absolute;
    
19.                     top: -1.8rem;
    
20.                     right: 0rem;
    
21.                     height: 1.27rem;
    
22.                     width: 1.27rem;
    
23.                     line-height: 1.2rem;
    
24.                     text-align: center;
    
25.                     font-size: 0.29rem;
    
26.                     color: #fff;
    
27.                     transform: rotate(45deg);
    
28.                     -webkit-transform: rotate(45deg);
    
29.                 }
    
30.             }   
    
31.         }
    

复制代码

主要是用到了CSS3 2D 转换方法 transform:rotate