我手边有一个奇怪的问题,我正在努力寻找解决方案.
我创建了一个三角形< div> “容器”只使用CSS但我现在想要的是在容器中插入一些文本.
我想要的解决方案必须包含三角形边界内的文本,无论插入多少文本,因为我希望创建缩略图.
一个例子可以找到here [注意;这个例子非常基本,只显示我选择创建三角形的方式]
进一步推动它,我想创建一个面朝上的三角形,一个面朝下,文本必须位于每个三角形的底部,因此对于第一个三角形,文本将位于底部,而第二个位于顶部,计划B只是将文本在垂直和水平方向上居中在三角形内.
CSS：
.up {
text-align:right;
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
HTML：
<div class="up">
<p>some information text goes here<p>
</div>
解决方法
对于您的计划B(将文本在垂直和水平三角形中居中),我更喜欢作为解决方案,您可以添加此css规则：
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
在这里试试：
.up {
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.up p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
<div class="up">
<p>some information text goes here
<p>
</div>
