CodePen

HTML

            
              %h1 Masked Text
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @import url("http://fonts.googleapis.com/css?family=Fjalla+One");

body {
  background: #edebf2;
  text-align: center;
  padding-top: 5em;
}

h1 {
  font: normal 6em/1.1 'Fjalla One', Arial, sans-serif;
  color: #5f5e61;
  text-transform: uppercase;
  border: .125em solid #5f5e61;
  display: inline-block;
  border-radius: .2em;
  padding: .15em .15em 0.075em;

  -webkit-mask-image: url(http://f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
  -webkit-transform: rotate(-3deg);

  -moz-mask-image: url(http://f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
  -moz-transform: rotate(-3deg);

  -o-mask-image: url(http://f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
  -o-transform: rotate(-3deg);

  mask-image: url(http://f.cl.ly/items/131E0X1b1i0X1s263R00/a.png);
  transform: rotate(-3deg);
}

h1:before, h1:after { content: "×"; margin: 0 .125em; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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