A CodePen by Scott J Haselwood. Retro Motel Sign - I wanted to play with css3 animations so I created this retro motel sign. I figured you could insert the spans in the h1 element by using lettering.js or something like that. No images used.

index.html

<div class="container">

<div class="sign">
  <h1><span class="one">M</span><span class="two">o</span><span class="three">t</span><span class="four">e</span><span class="five">l</span></h1>
  <h2>Vacancy</h2>
</div>
  
</div>

style.css

body {
  background: black;
}
.container {
  position: relative;
  width: 75%;
  margin: 0 auto;
  padding: 2em 25%;
}
div.sign {
  position: absolute;
  width: 9em;
  height: 0;
  border: 10em solid #00A0B0;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-left-width: 16em;
}

/*the pole*/
div.sign:before {
  content: "";
  position: absolute;
  display: block;
  z-index: -10;
  left: 3em;
  width: 1em;
  height: 16em;
  background: linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%);
background: -o-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%);
background: -moz-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%);
background: -webkit-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%);
background: -ms-linear-gradient(left , rgb(112,128,144) 32%, rgb(54,59,59) 66%);

background: -webkit-gradient(
  linear,
	left top,
	right top,
	color-stop(0.32, rgb(112,128,144)),
	color-stop(0.66, rgb(54,59,59))
);

}

/* sign background */
div.sign:after {
  content: "";
  position: relative;
  top: -22em;
  left: -18em;
  z-index: -5;
  display: block;
  width: 10em;
  height: 0;
  border: 11em solid #EB6841;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-left-width: 17em;

}

h1 {
  position: relative;
  z-index: 2;
  left: -3.5em;
  top: -3.5em;
  font-family: helvetica;
  text-transform: uppercase;
  font-size: 3em;
  color: #EB6841;
  text-shadow:3px 2px 5px #eb6e4c;
}

h1 span {
  position: relative;
  margin-left: 0.25em;
  background: white;
  padding: 0.25em;
  border: 5px solid #EDC951;
  border-radius: 10px;
  -moz-box-shadow: 2px 0px 19px #edc951;
  -webkit-box-shadow: 2px 0px 19px #edc951;
  box-shadow: 2px 0px 19px #edc951;
  
}

h1 span.one, h1 span.three, h1 span.five {
  top: 0.25em;
}

h2 {
  position: relative;
  z-index: 3;
  left: -0.25em;
  top: -6em;
  font-family: arial;
  text-transform: uppercase;
  text-align: center;
  padding: .25em;
  width: 5em;
  background: black;
  border: medium solid slategray;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  animation: flash 3s infinite;
  -webkit-animation: flash 3s infinite;
  -moz-animation: flash 3s infinite;
  -ms-animation: flash 3s infinite;
  -o-animation: flash 3s infinite;
}

/* coming soon */

h2:before {

}

@-keyframes flash {
  0% {color: rgba(34, 5, 7, 0.9);}
  50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;}
  100% {color: rgba(34, 5, 7, 0.9);}
}

@-webkit-keyframes flash {
  0% {color: rgba(34, 5, 7, 0.9);}
  50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;}
  100% {color: rgba(34, 5, 7, 0.9);}
}

@-moz-keyframes flash {
  0% {color: rgba(34, 5, 7, 0.9);}
  50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;}
  100% {color: rgba(34, 5, 7, 0.9);}
}

@-ms-keyframes flash {
  0% {color: rgba(34, 5, 7, 0.9);}
  50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;}
  100% {color: rgba(34, 5, 7, 0.9);}
}

@-o-keyframes flash {
  0% {color: rgba(34, 5, 7, 0.9);}
  50% { color: #cc3340; text-shadow:1px 2px 5px #cc3340;}
  100% {color: rgba(34, 5, 7, 0.9);}
}