Skip to content

Instantly share code, notes, and snippets.

@artzub
Last active January 10, 2021 06:00
Show Gist options
  • Save artzub/8798113b8b4b6942f0cfcf90b21cbf7d to your computer and use it in GitHub Desktop.
Save artzub/8798113b8b4b6942f0cfcf90b21cbf7d to your computer and use it in GitHub Desktop.
.border {
position: absolute;
top: -4px;
left: -4px;
transform: translate(-20px, -20px);
transition: transform;
transition-duration: 0.1s;
border-style: solid;
border-width: 1px;
border-color: red;
width: 8px;
height: 8px;
&--leftTop {
transform: translate3d(-20px, -20px, 1px);
border-bottom-color: transparent;
border-right-color: transparent;
}
&--leftBottom {
transform: translate3d(-20px, calc(100vh + 20px), 1px);
border-top-color: transparent;
border-right-color: transparent;
}
&--rightTop {
transform: translate3d(calc(100vw + 20px), -20px, 1px);
border-bottom-color: transparent;
border-left-color: transparent;
}
&--rightBottom {
transform: translate3d(calc(100vw + 20px), calc(100vh + 20px), 1px);
border-top-color: transparent;
border-left-color: transparent;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment