<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;
}
This Pen doesn't use any external CSS resources.