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：

<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>

View on JSFiddle

原文地址：https://www.jb51.cc/html/231929.html