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>

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

包含文本的CSS三角形

2 个答案: