1.伪元素

//html<div class="box">
      <div class="inner-box"></div>
</div>

//css.box {
    width: 500px;
    height: 300px;   
    background-color: blue;    
    margin: 20px auto;    
    overflow: hidden;    
    .inner-box {      
        width: 0;      
        height: 0;      
        border-width: 30px 30px 0 0;      
        border-style: solid;      
        border-color: #6c6 transparent transparent transparent;
    }    
    .inner-box::after {      
        position: relative;      
        content: "已投";      
        display: block;      
        width: 30px;      
        height: 30px;      
        font-size: 2px;      
        left: 0px;      
        top: -30px;      
        transform: rotate(45deg);
    }
  }

2. 正方形旋转

<div class="box1">
    <div class="inner-box1">
      <p>已投</p>
    </div>
</div>

.box1 {    
    position: relative;    
    width: 200px;    
    height: 200px;    
    background-color: orange;    
    overflow: hidden;    
    .inner-box1 {      
        width: 50%;      
        height: 50%;      
        background-color: red;      
        transform: rotate(-45deg);      
        position: absolute;      
        left: -30%;      
        top: -30%;      
        p {
            position: absolute;        
            left: 50%;        
            bottom: -15px;        
            color: #fff;        
            transform: translateX(-50%);
        }
    }
}

本站部分资源收集于网络，纯个人收藏，无商业用途，如有侵权请及时告知！