包含文本的 CSS 三角形答案

【问题标题】：CSS triangle containing text包含文本的 CSS 三角形
【发布时间】：2013-02-27 13:03:56
【问题描述】：

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

我只使用 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>

【问题讨论】：

三角形没有大小的情况下，如何让文本适应三角形？ width: 0px; height: 0px;。我充其量称其为黑客。你需要重新考虑你的方法。
你说你想要每个三角形底部的文本。但是您还说，无论有多少文本，您都希望它被三角形包含？你期待什么结果？如果有 4 行文字，是否还应该在底部，其余的被三角形隐藏？

标签： html css text geometry

【解决方案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>

View on JSFiddle

【讨论】：

感谢 Werner，这就是我需要的解决方案。非常简单但非常有效。如果你愿意，还有一个问题。当我放置溢出：隐藏属性时，它会将文本隐藏到，我认为这是由于尺寸涉及的陌生性，但是有没有办法可以克服这个问题以用于背景图像的目的，即我希望背景图像仅在三角形内显示?
问题是div容器的宽度和高度都等于0，所以每个内部对象都会被认为溢出。但是，如果你只想隐藏下面出现的溢出
，那么你可以在你的段落和 css 规则中分配一个类，就是这样（看here）。希望我的回答对你有用，那就投票吧

【解决方案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>

【讨论】：