Created
June 1, 2023 11:48
-
-
Save slavkapiyavka/f16c9fbe0700a2bf87f5d81cd068380f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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