Skip to content

Instantly share code, notes, and snippets.

@ebarojas
Created January 22, 2018 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ebarojas/df64dee9dbfe306302f187493bb9bcce to your computer and use it in GitHub Desktop.
Save ebarojas/df64dee9dbfe306302f187493bb9bcce to your computer and use it in GitHub Desktop.
Simple ribbon tilted 45 degrees – perfect to announce an ICO *hint hint*
<!-- This is the style -->
<style type="text/css">.ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
/* top left corner */
position: absolute;
left: -50px;
top: 40px;
/* 45 deg ccw rotation */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* shadow */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
</style>
<!-- The actual element -->
<div class="ribbon">
<a href="#"> ICO Coming Soon!</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment