inverted border-radius with box-shadow

index.html

<div class="inverted-border-radius"></div>

inverted-border-radius-with-box-shadow.markdown

inverted border-radius with box-shadow

A Pen by Ilham Widayat on CodePen.

License.

style.sass

body
  display: flex
  align-items: center
  justify-content: center
  height: 100vh
  width: 100vw
  
$width-border: 200px
$half-border: $width-border/2
$quad-border: $half-border/2
$half-border-inverted: $half-border * -1
$color: #f00

.inverted-border-radius 
  position: relative
  height: $half-border
  width: $half-border
  background-color: $color
  border-radius: 0 50% 50% 0
  &::before
    content: ""
    position: absolute
    background-color: transparent
    top: -$width-border
    height: $width-border
    width: $quad-border
    border-bottom-left-radius: $half-border
    box-shadow: 0 $half-border 0 0 $color
  &::after
    content: ""
    position: absolute
    background-color: transparent
    bottom: -$width-border
    height: $width-border
    width: $quad-border
    border-top-left-radius: $half-border
    box-shadow: 0 $half-border-inverted 0 0 $color