CodePen

HTML

            
              <header>
  <div class="title-wrapper">
    <h1 id="main-title" class="main-title">Headline</h1>
  </div>
</header>
            
          
!

CSS

            
              body {
  background: url(http://i46.tinypic.com/2lbko0m.png);
  font-size: 62,5%;
}

header {
  width: 70%;
  @media (max-width: 990px) {
    width: 95%;
  }
  height: 250px;
  margin: 20px auto 0;
  background: rgba(black, 0.4);
  box-shadow: 8px 8px 10px rgba(black, 0.7);
  @include border-radius(10px);
}

.title-wrapper {
  padding: 0 20px;
  text-align: center;
}

h1 {
  position: relative;
  display: inline-block;
  width: 40%;
  @media (max-width: 440px) {
    width: 45%;
  }
  margin: 20px 0;
  font-size: 72px; /* Legacy Support*/
  font-size: 7.2rem;
  font-weight: 800;
  font-family: Arial, sans-serif;
  color: #ccc;
  &:before {
    content: "";
    position: absolute;
    width: 70%;
    @media (max-width: 440px) {
      width: 50%;
    }
    height: 0.75em;
    top: 12%;
    left: -65%;
    background-color: orange;
    @include skew(15deg, 0deg);
  }
  &:after {
    content: "";
    position: absolute;
    width: 70%;
    @media (max-width: 440px) {
      width: 50%;
    }
    height: 0.75em;
    top: 12%;
    right: -65%;
    background-color: orange;
    @include skew(-15deg, 0deg);
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("#main-title").fitText(0.7, { minFontSize: 30, maxFontSize: '90px' });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................