包含文本的 CSS 三角形

Question

我手头有一个奇怪的问题，我正在努力寻找解决方案。

我仅使用 CSS 创建了一个三角形

<div>

“容器”，但我现在想要的是在容器内插入一些文本。
我想要的解决方案必须将文本包含在三角形的边界内，无论我要创建缩略图时插入多少文本。
可以在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>

Answer 1

对于你的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>

在 JSFiddle 上查看

Answer 2

无论有多少文本，如何将文本放入三角形内？据我所知，仅靠 CSS 是不可能的。无法容纳的文本将会溢出，您需要使用 Javascript 相应地调整字体大小以适应所有文本。

但是假设您希望将合理数量的文本放入直角三角形内（底边在左侧，指向右侧），这里有一种方法：

• 创建一个具有固定宽度和高度的容器来容纳文本和形状。
• 在容器内，创建两个向右浮动的 div。每个的宽度为 100%，高度为 50%，形状轮廓和剪辑路径为多边形。
• 为这些 div 提供类似于渲染页面背景的背景颜色。

这个想法是，这两个 div 之外的部分将采用我们正在寻找的三角形形状。

在 CSS 中，元素都是矩形，无论你是否意识到。这不是画三角形。这是关于创建暗示三角形的相邻元素。希望这是有道理的。

.main {
  width: 400px;
  height: 200px;
  position: relative;
  background: peachpuff;
}
.top, .bottom {
  width: 100%;
  height: 50%;
  background: white;
}
.top {
  -webkit-shape-outside: polygon(0% 0, 100% 0%, 100% 100%);
  shape-outside: polygon(0% 0, 100% 0%, 100% 100%);
  float: right;
  -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%);
  clip-path: polygon(0% 0, 100% 0%, 100% 100%);
}
.bottom {
  height: 50%;
  float: right;
  bottom: 0;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
  shape-outside: polygon(0% 100%, 100% 100%, 100% 0%);
}

<div class="main">
  <div class="top"></div>
  <div class="bottom"></div>
  <p>
    When should one use CSS versus SVG? Use CSS for simple shapes. HTML elements are rectangles, so all you are doing is creating an illusion of shapes. Sometimes this can become a deep rabbit hole. Instead, use SVG for complex shapes.
   </p>
</div>

Answer 3

使用

shape-outside

CSS 属性来定义代码应围绕的区域。

.main {
  width: 100%;
  height: 200px;
  position: relative;
  background: blue;
}
.left,
.right {
  width: 50%;
  height: 100%;
  background: white;
}
.left {
  shape-outside: polygon(0% 0, 0% 100%, 100% 0%);
  clip-path: polygon(0% 0, 0% 100%, 100% 0%);
  float: left;
}
.right {
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  float: right;
}
p {
  text-align: center;
}

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
A saepe natus ad incidunt libero in eligendi consequatur non libero commodi
aut ullam ullam non voluptas aliquid. Vel culpa atque sit.
  </p>
</div>