纯CSS实现右上角三角形标签

很多时候，我们需要在一个容器的右上角展示一个三角形的标签，就像这样：

<template>
  <div class="box">
    <div class="tip">
      <span>推荐</span>
    </div>
  </div>
</template>

<style>
 body {
   height: 100vh;
   margin: auto;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .box {
   width: 100px;
   height: 100px;
   background-color: red;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
 }
 .box .tip {
   position: absolute;
   height: 50px;
   width: 50px;
   right: -24px;
   top: -24px;
   transform: rotate(45deg);
   background-color: #fff;
   font-size: 12px;
 }
 span {
   top: 32px;
   left: 13px;
   color: #000;
   position: relative;
 }
</style>

实现原理也比较简单，就是只展示右上角的正方形的四分之一，然后将文字进行相对定位到其中即可。