Skip to content

Instantly share code, notes, and snippets.

@termitkin

termitkin/cut-corners-with-border.css

Created September 28, 2019 15:14
Show Gist options
  • Save termitkin/c2b2b3876fa0aa27ce14603807a0b338 to your computer and use it in GitHub Desktop.
Save termitkin/c2b2b3876fa0aa27ce14603807a0b338 to your computer and use it in GitHub Desktop.
Download ZIP
[CSS] Cut corners with border
Raw
cut-corners-with-border.css
.wrap {
display: inline-block;
padding: 20px;
background-color: SeaGreen;
}
.elem {
width: 300px;
position: relative;
border-radius: 10px;
background-image: linear-gradient(135deg, transparent 5%, #333 5% 95%, transparent 95%);
padding: 20px;
z-index: 0;
}
.elem::before {
z-index: -1;
content: '';
position: absolute;
left: 3px;
right: 3px;
top: 3px;
bottom: 3px;
border-radius: 7px;
background-image: linear-gradient(135deg, transparent 5%, orange 5% 95%, transparent 95%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment