Skip to content

Instantly share code, notes, and snippets.

@SimonPadbury
Last active January 24, 2021 16:51
Show Gist options
  • Save SimonPadbury/fc55c054c0480550c3be592111778763 to your computer and use it in GitHub Desktop.
Save SimonPadbury/fc55c054c0480550c3be592111778763 to your computer and use it in GitHub Desktop.
.sticky {
position: absolute;
right: 0;
z-index: 150;
transform: rotate(5deg);
width: 200px;
min-height: 150px;
margin: -10px 10px 10px;
padding: 10px;
font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
font-size: 14px;
color: #000;
background: rgba(255, 255, 51, 0.8);
box-shadow: -2px 2px 2px rgba(0,0,0,0.3);
}
.sticky:before, .sticky:after {
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 0;
right: 0;
}
.sticky:before {
border-top: solid 8px #fff;
border-right: solid 8px #fff;
border-left: solid 8px transparent;
border-bottom: solid 8px transparent;
}
.sticky:after {
border-bottom: solid 8px #dddd33;
border-left: solid 8px #dddd33;
border-right: solid 8px transparent;
border-top: solid 8px transparent;
}
<div class="sticky">
<b>Note:</b> Put any text in here.
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment