Skip to content

Instantly share code, notes, and snippets.

@slavkapiyavka
Created June 1, 2023 11:48
Show Gist options
  • Save slavkapiyavka/f16c9fbe0700a2bf87f5d81cd068380f to your computer and use it in GitHub Desktop.
Save slavkapiyavka/f16c9fbe0700a2bf87f5d81cd068380f to your computer and use it in GitHub Desktop.
.ribbon {
--s: 70px; /* the ribbon size */
--d: 20px; /* the depth */
--c: 20px; /* the cutout part */
padding: 0 calc(var(--s) + var(--d)) var(--d);
background:
conic-gradient(at left var(--s) bottom var(--d),
#0000 25%,#0008 0 37.5%,#0004 0) 0 /50% no-repeat,
conic-gradient(at right var(--s) bottom var(--d),
#0004 62.5%,#0008 0 75%,#0000 0) 100%/50% no-repeat;
clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
background-color: #CC333F; /* the main color */
width: fit-content;
color: white;
font-size: 1.4rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment