小编Rro*_*ron的帖子

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

我<div>只使用CSS 创建了一个三角形"容器",但我现在想要的是在容器中插入一些文本.
我想要的解决方案必须包含三角形边界内的文本,无论插入多少文本,因为我希望创建缩略图.这里有
一个例子[注意; 这个例子非常基本,只显示我选择创建三角形的方式]

进一步推动它,我想创建一个面朝上的三角形,一个面朝下,文本必须位于每个三角形的底部,因此对于第一个三角形,文本将位于底部,而第二个位于顶部,计划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>