CodePen

HTML

            
              <div class="diamond">
  <p>A Proven Three-Fold Technique</p>
</div>
            
          
!
via HTML Inspector

CSS

            
              $blue : #00003c;
$yellow : yellow;

body { 
  background: #e6e6e6;
}

.diamond {
  width: 480px;
  height: 150px;
  margin: 2em auto;

  background: linear-gradient(17deg, $blue 66px, white 66px, white 69px, $yellow 69px, $yellow 70px, transparent 70px) right top,
    linear-gradient(-17deg, $blue 66px, white 66px, white 69px, $yellow 69px, $yellow 70px, transparent 70px) top left,
    linear-gradient(-197deg, $blue 66px, white 66px, white 69px, $yellow 69px, $yellow 70px, transparent 70px) bottom right,
    linear-gradient(197deg, $blue 66px, white 66px, white 69px, $yellow 69px, $yellow 70px, transparent 70px) bottom left;
  background-size: 50%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  outline: 1px solid red;
}
p {
    position: relative;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 55px 0 0;
    z-index: 5;
    text-transform: uppercase;
    font-size: 17px;
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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