如何在三角形div的底部定位文本?

时间:2015-03-24 16:23:28

标签: javascript jquery html css css3

我有以下div:

div {
  width: 0px;
  height: 0px;	
  border-left: 	126px solid transparent;
  border-right: 	126px solid transparent;
  border-bottom: 	126px solid #D30000;
  position: relative;
  left: 55%;
  top: 40px;
  display: table-cell;
  text-align:center;
  vertical-align: bottom;
}
<div>Triangle</div>

以下三角形上的对齐文字如下:

                    _Triangle_
                   /          \
                  /            \
                 /              \
                /                \
               /________________  \

我想要完成的是:

                       /\
                      /  \
                     /    \
                    /      \
                   /        \
                  / Triangle \

如何将文本推送到三角形div的底部而不必将其包装在标签中?对我来说使用position:relative是很重要的;因为绝对没有用。但是,即使我删除职位:亲属;文本仍然没有到div的底部。它保持在顶部,三角形的顶角被切掉,使形状看起来像一个梯形。

2 个答案:

答案 0 :(得分:8)

您可以使用伪元素制作三角形。

div {
  text-align: center;
  width: 126px;
  margin: 126px auto;
  position: relative;
  color: white;
}
div:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: -1;
  border-left: 126px solid transparent;
  border-right: 126px solid transparent;
  border-bottom: 126px solid #D30000;
}
<div>Triangle</div>

答案 1 :(得分:0)

您可以使用DIV中的其他SPAN以及用于绘制三角形的伪类之前执行此操作。我使用SPAN将文本定位到DIV的底部。

&#13;
&#13;
div{
    width: 252px;
    height: 126px;
    position: absolute;
}
div>span{
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
}
div:before{
    content: '';
    position: absolute;
    bottom: 0px;
    border-width: 126px;
    border-style: solid;
    border-color: transparent transparent #D30000  transparent;
    display: block;
    z-index: -1;
}
&#13;
<div><span>Triangle</span></div>
&#13;
&#13;
&#13;

我在色度和IE中尝试过它。