我有以下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的底部。它保持在顶部,三角形的顶角被切掉,使形状看起来像一个梯形。
答案 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的底部。
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;
我在色度和IE中尝试过它。