CodePen

HTML

            
              <div class="main-title test1">
  <h1>Lorem Ipsum</h1>
</div>

<div class="main-title test2">
  <h1>Lorem ipsum</h1>
</div>

<div class="main-title test3">
  <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec urna lobortis nibh gravida venenatis. Maecenas a hendrerit nibh.</h1>
</div>

<div class="main-title test4">
  <h1>Lorem ipsum</h1>
</div>
            
          
!
via HTML Inspector

CSS

            
              .main-title{
  width: 60%;
  padding: 0 2em;
  margin: 2em auto;
  text-align: center;
  position: relative;
  
  &:before{
    @include transform(skew(-15deg));
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: orange;
    z-index: -10;
  }
  
  > h1{
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 2em;
    
    &:before{
      @include transform(skew(-15deg));
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      background: #FFFFFF;
      z-index: -5;
    }
  }
}



/* --- DIFFERENT STYLES --- */



.test2:before{
  @include transform(skew(15deg));
  background: #454545;
}
  
.test2 > h1:before{
  @include transform(skew(15deg));
}

.test3:before{
  background-color: #1e5799;
  @include filter-gradient(#1e5799, #7db9e8, horizontal);
  @include background-image(radial-gradient(center, ellipse cover,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%));
}

.test4:before{
  background-color: #FFFFFF;
  @include filter-gradient(#FFFFFF, #454545, vertical);
  @include background-image(linear-gradient(top,  #FFFFFF 0%,#FFFFFF 45%,#454545 45%,#454545 55%,#FFFFFF 55%,#FFFFFF 100%));
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................