Retro Speech Bubble

by Chris Buttery

HTML

<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>

<div>
  <span>I can't believe I ate the whole thing!</span>
</div>

CSS

body {
  font-family: 'Stint Ultra Condensed', cursive;
  font-size: 16px;
}

div {
  background: #b1382d;
  clip-path: polygon(0 40px, 500px 0, 460px 400px, 60px 350px, 40px 400px);
  -webkit-clip-path: polygon(0 40px, 500px 0, 460px 400px, 60px 350px, 40px 400px);
  color: #e29e39;
  display: table;
  height: 400px;
  width: 500px;
}

span {
  display: table-cell;
  font-size: 4.236em;
  line-height: 1.2;
  padding: 0 80px;
  vertical-align: middle;
}