Created
November 2, 2019 19:55
-
-
Save alexd73/3e79788ffb4b78817de475c6d9d9045d to your computer and use it in GitHub Desktop.
ribbon css
This file contains hidden or 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
| <div class="ribbon-container"> | |
| <h2 class="title ribbon"> | |
| <div class="ribbon-content">{{ model.title }}</div> | |
| </h2> | |
| </div> |
This file contains hidden or 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
| $swirl-level: 0.3em; | |
| $swirl-buttom: -$swirl-level; | |
| $swirl-height: 1.1em; | |
| $swirl-width: 1 + $swirl-level; | |
| .ribbon-container { | |
| background: transparent !important; | |
| position: relative; | |
| z-index: 1; | |
| text-align: center; | |
| } | |
| .ribbon { | |
| background: hsl(30, 90%, 65%); | |
| box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.5); | |
| line-height: 1; | |
| text-align: center; | |
| margin: 0 auto; | |
| padding: 0.1rem 0.25em; | |
| position: relative; | |
| display: inline-block; | |
| &:before, | |
| &:after { | |
| border: $swirl-height solid hsl(30, 82%, 62%); | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| bottom: $swirl-buttom; | |
| z-index: -1; | |
| } | |
| &:before { | |
| left: -2em; | |
| border-right-width: $swirl-width; | |
| border-left-color: transparent; | |
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| &:after { | |
| right: -2em; | |
| border-left-width: $swirl-width; | |
| border-right-color: transparent; | |
| box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5); | |
| } | |
| .ribbon-content { | |
| border-top: 0.0625em dashed hsl(30, 90%, 44%); | |
| border-bottom: 0.0625em dashed hsl(30, 90%, 44%); | |
| box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.08), | |
| inset 0px -1px 1px rgba(255, 255, 255, 0.08), 0px -1px 1px rgba(255, 255, 255, 0.2), | |
| 0px 1px 1px rgba(0, 0, 0, 0.08); | |
| display: block; | |
| padding: 0.6875em 0; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| border-style: solid; | |
| border-color: hsl(30, 80%, 40%) transparent transparent transparent; | |
| bottom: $swirl-buttom; | |
| } | |
| &:before { | |
| left: 0; | |
| border-width: $swirl-level 0 0 $swirl-level; | |
| } | |
| &:after { | |
| right: 0; | |
| border-width: $swirl-level $swirl-level 0 0; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment