JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<div class="fancy-corner">

</div>

SCSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.fancy-corner {
  $corner-width: 10rem;
  $corner-shift: calc(#{$corner-width} * (-1 / 4));  
  
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  
  &::before {
    content: '';
    display: block;
    width: $corner-width;
    height: $corner-width;
    position: absolute;
    top: $corner-shift;
    left: $corner-shift;
    overflow: hidden;
    
    outline: 1px solid #ddd;
  }
}