Question

假设我有下面的三角形。如果不添加任何html或标签，我怎样才能将文本定位到三角形的中心？

您会注意到三角形右上角的白色文字。我知道三角形是形状周围的大边框。这甚至可能吗？

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;
}

这是example。

侨拉尔夫

Answer 2

将文字包裹在范围内并绝对定位：

JSfiddle

span{
    position: absolute;
    top: 80px;
    left: 33%;
}

<div><span>This is a triangle</span></div>

Here would be the solution if you were to use a pseuedo element. (not best practice)

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

在三角形CSS中定位文本

2 个答案: