JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="punch">
  <div class="content">
    <p>content</p>
    
  </div>
  <div class="button">
    <p>button</p>
  </div>
</div>

CSS

:root {
  --line-bg: #dddddd;
  --bg: #ffffff;
}

html, body {
  height: 100%;
  /* background: #999999; */
}
body {
  /* background: linear-gradient(to bottom, #140409 0%,#d81518 100%); */
}
.punch {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 90%;
  height: 146px;
  margin: 30px;
  /* filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15)); */
}
.content, .button { 
  position: relative;
}
.content::before, .button::before { 
  position: absolute;
  content: '';
  top: 1px;
  left: 1px;
  /* z-index: -1; */
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 6px;
  /* background: #ffffff; */
  background-repeat: no-repeat;

  background-size: 51% 100%,  50% 100%;
}
.content::before {
  
  background-image: 
    radial-gradient(
      circle at 0% 100%, 
      transparent 0%,
      transparent 12px,
      #ffffff 13px, 
      #ffffff calc(100%),
      transparent calc(100% - 1px)),
    radial-gradient(
      circle at 100% 100%,
      transparent 0%,
      transparent var(--radial-radius),
      #ffffff calc(var(--radial-radius) + 1px),
      #ffffff calc(100%),
      transparent calc(100% - 1px));
    background-position: left bottom, right bottom;
}
.button::before {
  --background-color: #ffffff;
  background-image: 
    radial-gradient(
      circle at 0% 0%, 
      transparent 0%,
      transparent var(--radial-radius), 
      var(--background-color) calc(var(--radial-radius) + 1px), 
      var(--background-color) 100%,transparent 100%), 
    radial-gradient(
      circle at 100% 0%, 
      transparent 0%,
      transparent var(--radial-radius), 
      var(--background-color) calc(var(--radial-radius) + 1px), 
      var(--background-color) 100%,transparent 100%);
    background-position: left top, right top;
    background-size: 51% 100%,  50% 100%;
   }


.content {
  
  --radial-radius: 12px;
  
  flex: 1;
  border-radius:...

JavaScript

/* const body = document.querySelector('body');

setInterval(function(){
  let r = Math.random() * 255;
  let g = Math.random() * 255;
  let b = Math.random() * 255;
   body.style.background = 'rgba('+ r + ',' + g + ',' + b +',1)'
}, 2000); */