<div class="cr cr-top cr-left cr-sticky cr-red">Hello</div>
<div class="cr cr-top cr-right cr-sticky cr-blue">Hello</div>
<div class="cr cr-bottom cr-left cr-sticky cr-orange">Hello</div>
<div class="cr cr-bottom cr-right cr-sticky cr-green">Hello</div>

body {
  background: #f0f0f0;
  font-family: sans-serif;
}

.cr {
  width: 200px;
  padding: 16px;
  position: absolute;
  text-align: center;
  color: #f0f0f0;
}

.cr-sticky {
  position: fixed;
}

/* Positions */

.cr-top    { top: 25px; }
.cr-bottom { bottom: 25px; }
.cr-left   { left: -50px; }
.cr-right  { right: -50px; }

/* Rotations */

.cr-top.cr-left,
.cr-bottom.cr-right {
  transform: rotate(-45deg);
}

.cr-top.cr-right,
.cr-bottom.cr-left {
  transform: rotate(45deg);
}

/* Colors */

.cr-white     { background-color: #f0f0f0; color: #444; }
.cr-black     { background-color: #333; }
.cr-grey      { background-color: #999; }
.cr-blue      { background-color: #39d; }
.cr-green     { background-color: #2c7; }
.cr-turquoise { background-color: #1b9; }
.cr-purple    { background-color: #95b; }
.cr-red       { background-color: #e43; }
.cr-orange    { background-color: #e82; }
.cr-yellow    { background-color: #ec0; }