<div class="container">
    <div class='ribbon_before'>&nbsp;</div>
    <div class="ribbon">LOREM IPSUM DOLOR SIT AMET</div>
    <div class='ribbon_after'>&nbsp;</div>
</div>

body{
  font-size:18px; 
  color:#FFF; 
}
.container {
    margin: 50px 100px;
}
.ribbon { 
  position: absolute;
  border: 1px solid black;
  width:400px;
  text-align:center; 
  background:#000; padding:20px 5px 20px 5px;
  transform:  skew(0deg, -14deg) ;
  -webkit-transform:  skew(0deg, -14deg) ;
  -moz-transform: skew(0deg, -14deg) ;
  -o-transform:  skew(0deg, -14deg) ;
  -ms-transform: skew(0deg, -14deg) ;
}
.ribbon_before {
    height: 25px;
    width: 50px;
    position: relative;
    border: 1px solid black;
    top: 114px;
    left: 0px;
}
.ribbon_after {
    height: 25px;
    width: 50px;
    position: relative;
    border: 1px solid black;
    top: -52px;
  left: 360px;
}