css - CSS3 Triangle でのテキストの配置

Question

三角形の形をしている div 内のテキストのスタイリングに問題があります。すべてCSSで行います。

三角形は現在、大規模なプロジェクトに必要な絶対位置に配置されています (関係がないため、大規模なプロジェクトからコードを削除しました)。

ここにjsFiddleがあります

以下のコードを参照してください。

HTML

<div>Here is a Triangle</div>

CSS

div {
    text-align: center;
    color: #fff;
    font-size: 1.125em;
    width: 100%;
}

div:nth-child(1) {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 0;
    height: 0;  
    border-left:    126px solid transparent;
    border-right:   126px solid transparent;
    border-bottom:  126px solid #D30000;
}