JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="rect type01"></div>

<div class="rect type02"></div>

<div class="rect type03"></div>

SCSS

.rect {
  width: 200px;
  /* height: 100px; */
  aspect-ratio: 1 / 1;
  background: #000;
  margin: 10px;
  &.type01 {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  &.type02 {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  &.type03 {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
}