在三角形CSS中定位文本

Question

假设我有下面的三角形。在不添加任何html或标签的情况下，我如何将文本定位到三角形的中心呢?

小提琴:http://jsfiddle.net/3LXaD/

您会注意到三角形右上角的白色文本。我的理解是三角形是一个大边框围绕的形状。这可能吗?

CSS

div:nth-of-type(1) {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 150px 130px 150px;
    border-color: transparent transparent #d30000 transparent;
    line-height: 0px;
    _border-color: #000000 #000000 #d30000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}
div {
    font-size: 16px;
    color: #FFFFFF; 
    text-align: center;
}

HTML

<div>This is a triangle</div>

Answer 1

如果没有额外的标记，试试这个:

div:nth-of-type(1):before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 150px 130px 150px;
  border-color: transparent transparent #d30000 transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #d30000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  position: absolute;
  top: 0;
  z-index: -1;
  left: 50%;
  margin-left: -150px;
}
div {
  font-size: 16px;
  color: #ffffff; 
  text-align: center;
  line-height: 130px;
  position: relative;
}

下面是一个例子。

再见拉尔夫

Answer 2

将文本在span中换行并绝对定位:

JSfiddle

span{
    position: absolute;
    top: 80px;
    left: 33%;
}
<div><span>This is a triangle</span></div>

如果要使用伪元素，那么

将是解决方案。(非最佳实践)

div:after{
    content: 'This is a triangle';
    color: white;
    position: absolute;
    top: 80px;
    left: 33%;
}