<p>The truth is out there</p>
<div class="tri"></div>
p{
  position: relative;
  width: 250px;
  font-size: 9pt;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 40px auto;
  color: #111;
  display: block;
  border: solid 1px #111;
  padding: 5px 8px;
}
p:after{
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border-top: solid 8px #111;
  border-left: solid 8px transparent;
  border-right: solid 8px transparent;
}
.tri{
  width: 0;
  height: 0;
  margin: 40px auto;
  border-bottom: solid 175px #111;
  border-left: solid 100px transparent;
  border-right: solid 100px transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js