Created
February 6, 2017 18:52
-
-
Save anonymous/cc4038f15735df016214fc8a6a7d9b5d to your computer and use it in GitHub Desktop.
Corner Triangle Notice with Shadow
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="triangle"> | |
| <div class="triangle-text"> | |
| <strong>TRY OUT</strong> | |
| <br>Only $5/month<br> | |
| </div> | |
| </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
| body { | |
| font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .triangle { | |
| position: fixed; | |
| right: 0; | |
| top: 0; | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| border-width: 0 120px 120px 0; | |
| border-color: transparent #84cee4 transparent transparent; | |
| z-index: 10001; | |
| } | |
| .triangle::after { | |
| content: ""; | |
| position: fixed; | |
| top: -50px; | |
| right: -125px; | |
| width: 300px; | |
| height: 120px; | |
| background: transparent; | |
| transform: rotate(45deg); | |
| box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); | |
| } | |
| .triangle-text { | |
| position: fixed; | |
| width: 150px; | |
| font-size: 14px; | |
| text-align: center; | |
| line-height: 18px; | |
| color: #f0f0f0; | |
| padding-bottom: 20px; | |
| top: 25px; | |
| right: -30px; | |
| left: auto; | |
| transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment