我有一个如下的 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>
下面的三 Angular 形对齐文本如下:
_Triangle_
/ \
/ \
/ \
/ \
/________________ \
我想要完成的是:
/\
/ \
/ \
/ \
/ \
/ Triangle \
如何将文本推到三 Angular 形 div 的底部而不必将其包装在标签中?使用 position: relative; 对我来说很重要;因为绝对不起作用。但是,即使我删除 position:relative;文本仍然没有到达 div 的底部。它停留在顶部,三 Angular 形的顶 Angular 被切断,使形状看起来像梯形。
最佳答案
您可以使用伪元素来制作三 Angular 形。
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>
关于javascript - 如何将文本定位在三 Angular 形 div 的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29237862/