<div class="project">
  <span class="ribbon">Featured Projects</span>
  <img src="http://evablackdesign.com/wp-content/uploads/2013/05/lettering5.png" alt="" />
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

.project {
  position: relative;
  width: 697px;
  margin: 80px auto;
  &::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -9px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 165px 165px;
    border-color: transparent transparent #000 transparent;
    z-index: -1;
  }
}

.ribbon {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  left: -20px;
  top: 42px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
  padding: 10px 5px;
  @include rotate(-45deg);
  z-index: 3;
  &::before {
    content: "";
    top: -2px;
    left: -18px;
    width: 35px;
    height: 100%;
    position: absolute;
    border-color: #000;
    border-style: solid;
    border-width: 2px 0px 2px 2px;
    @include skewX(-45deg);
  }
  &::after {
    content: "";
    top: -2px;
    right: -18px;
    width: 35px;
    height: 100%;
    position: absolute;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 2px 0px;
    @include skewX(45deg);
  }
}

/*
*
* recreating ribbon from 
* http://evablackdesign.com/ in CSS
*
/*