前端画三角形以及三角形内写文字

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%);
    }
  }
}