div 카드 위 리본 뱃지 CSS

1. html 리본 뱃지 영역 선언

<ul class="documents">
  <li style="cursor: pointer">
    <!-- 추천 문서 뱃지 -->
    <div class="recoDiv">
      <div class="recoIcon">
        <img :src="require('@/assets/images/icon-actions-toggle-favorites.png')" alt="" />
        <div>나의 관심 문서</div>
      </div>
    </div>
    <!--  카드 내부 영역 -->
    <div class="docCard">
    </div>
  </li>
</ul>

2. css 속성 ( 위치는 top과 left 속성을 조율 )

.recoDiv {
	position: absolute;
    content: '';
    top: -7px;
   	left: -8px;
    width: 102px;
    height: 26px;
    background: #3e6cdf;
    color: white;
   	text-align: center;
    font-size: 12px;
    border-radius: 2px;
    .recoIcon {
      padding: 4px 7.5px 4px 5px;
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin-right: 1.5px;
        margin-top: 1px;
      }
    }
    &:before {
      position: absolute;
      top: 25px;
      left: 0.1px;
      content: '';
      border-top: 8px solid #3e6cdf;
      border-left: 8px solid rgba(0, 0, 0, 0);
      border-top-left-radius: 2px;
      // 기울기
      // transform: rotate( 45deg );
    }
}

참고 ) https://medium.com/@so_deep.dev/ribbon-style-badge-for-cards-with-css-5c9da53d908e
위 예제가 정말 상세히 잘나와서 정독 추천