Drawing 45 Degree angle with CSS3

Question

I'm trying to draw a 45 degree angle with CSS, the first image is what i'm trying to achieve, the second is what i've managed. I can't figure out how to cut the outside of the angle by another 45 degrees (see dotted red line).

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
}
.flick:before {
  background: #055468;
  content: "";
  height: 100px;
  margin: -65px 0 0 -90px;
  position: absolute;
  transform: skew(45deg);
  width: 80px;
}

<div class="flick"><span class="text">Hello world</span></div>

Answer 1

You should use rotate instead of skew for this. I have also changed the position of your :before element so its bottom right corner lines up with the bottom left corner of your flick class and then set the transform origin to the shared corner, creating exactly the effect you wanted (I also moved it away from the top so the effect would be visible):

.flick .text {
  position: relative;
  z-index: 50;
}
.flick {
   margin-top: 200px;
  background-color: #055468;
  color: white;
  margin-left: 140px;
  padding: 15px;
  position: relative;
}
.flick:before {
  background: #055468;
  content: "";
  width: 100px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 100%;
  transform: rotateZ(45deg);
  transform-origin: bottom right;
  width: 80px;
}

<div class="flick"><span class="text">Hello world</span></div>