JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="contaier">
  <div class="circle"></div>
</div>

SCSS

html, body {
  height: 100%;
  overflow: hidden;
}
* {
  box-sizing: border-box;
}
.contaier {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #eee;
}
.contaier .circle {
  --size: 100vw;
  --bg-pos: 50%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: var(--size);
  height: var(--size);
  border-radius: 0 0 0 var(--size);
  background: radial-gradient(circle farthest-corner at 100% 0%, rgba(255,0,0,0) 0%, rgba(255,0,0,0) var(--bg-pos), rgba(255,0,0,1) var(--bg-pos), rgba(255,0,0,1) 100%);
  background-size: var(--size) auto;
  filter: drop-shadow(3px 3px 30px rgba(255,0,0,1))
  /* &:hover {
    --size: 500px;
  } */
}