Last active
August 13, 2019 23:55
-
-
Save pixelpylon/7ae6e89aea45bbc5b6788313628a5635 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
<div class="parent"> | |
<h4 class="ribbon">Skip The Line<br> <small>not available elsewhere</small></h4> | |
</div> | |
<style> | |
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap'); | |
.parent { | |
overflow: hidden; | |
width: 100%; | |
height: 300px; | |
//margin: 25px auto; | |
//border:1px solid grey; | |
position: relative; | |
} | |
.ribbon { | |
margin: 0; | |
padding: 0; | |
background:#42b1ff; | |
color:white; | |
padding:0.24em; | |
position: absolute; | |
top:0; | |
right:0; | |
transform: translateX(30%) translateY(0%) rotate(45deg); | |
transform-origin: top left; | |
text-align:center; | |
font-family: 'Rubik', sans-serif; | |
} | |
.ribbon:before, | |
.ribbon:after { | |
content: ''; | |
position: absolute; | |
top:0; | |
margin: 0 -1px; | |
width: 100%; | |
height: 100%; | |
background:#42b1ff; | |
} | |
.ribbon:before { | |
right:100%; | |
} | |
.ribbon:after { | |
left:100%; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment