JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="tag type01">
  tag
</div>
<div class="tag type02">
  tag
</div>

SCSS

.tag {
  position: relative;
  width: 400px;
  height: 358px;
  margin: 30px;
  border-radius: 30px;
  background: linear-gradient(270deg, rgba(153,153,153,0) 0%, rgba(153,153,153,0) 154px, rgba(153,153,153,1) 154px, rgba(153,153,153,1) 100%);
  // 파일로도 가능해요
  // mask-image: url('icon.svg');
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 154px;
    height: 100%;
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='154' height='358' viewBox='0 0 154 358' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M119 0H0V358H119C138.33 358 154 342.33 154 323V241C119.758 241 92 213.242 92 179C92 144.758 119.758 117 154 117V35C154 15.67 138.33 0 119 0Z' fill='%23D9D9D9'/%3E%3C/svg%3E");
  }
  &.type01 {
    
    &::before {
      background: red;
    }
  };
  &.type02 {
    &::before {
      background: blue;
    }
  }
}