.app
   .box
     .arrow
View Compiled
$bgColor: #72BAEC

body
    margin: 0
    padding: 0
    background-color: $bgColor
    overflow: hidden
.app
    position: relative
    width: 100vw
    height: 100vh
    display: flex
    justify-content: center
    align-items: center
    .box
        position: relative
        width: 200px
        height: 200px
        border: 10px solid #FFF
        border-radius: 20px 0 20px 20px
        box-shadow: -10px 10px 15px rgba(0,0,0, 0.2)
        .arrow
            position: absolute
            left: 50%
            width: 10px
            height: 250px
            background: #FFF
            transform: rotate(45deg) translate(-210%, -35px)
            transform-origin: center center
            &::after, &::before
                position: absolute
                content: ""
                width: 15px
                height: 30px
                background: #000
                transform-origin: top center
                background: $bgColor
            &::after
                top: 30px
                right: 30px
                transform: rotate(45deg)
            &::before
                top: 30px
                left: 30px
                transform: rotate(-45deg)
    


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.