html怎么左包含文字的三角形,html – 包含文本的CSS三角形

我手边有一个奇怪的问题,我正在努力寻找解决方案.

我创建了一个三角形< 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：

some information text goes here