JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="shape"></div>

<div class="shape2"></div>

<div class="shape3"></div>

SCSS

body {
  background: #eeeeee;
}

.shape {
  --r: 25px; /* 반경 */
  --s: 40px; /* 컷의 크기 */

  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
  width: 300px;
  height: 100px;
  background:  red;
  /* border: 1px solid #000000; */
}

.shape2 {
  --r: 25px; /* 반경 */
  --s: 40px; /* 컷의 크기 */

  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
  /* mask:
    right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0); */
  width: 300px;
  height: 100px;
  background:  green;
  background: radial-gradient(circle at center top, transparent 0px, transparent 40px, red 40px) no-repeat 0 20px;
  background: conic-gradient(circle at center top, transparent 0px, transparent 40px, red 40px) no-repeat 0 20px;
  margin-top: 30px;
  border: 1px solid #000000;
}

.shape3 {
  --width-size: 300px;
  --height-size: var(--width-size);
  --retangle-size: 232px;
  --circle-size: 80px;
  --circle-halfsize: calc(var(--circle-size) / 2);
  display: grid;
  position: relative;
  width: var(--width-size);
  height: var(--width-size);
  margin-top: 30px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: url("https://images.unsplash.com/photo-1684262483735-1101bcb10f0d?q=80&w=2235&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat 0 0;
  background-size: 100% 100%;
  mask-image: 
   ...