11

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

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

2 回答 2

13

对于您的计划 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 上查看

于 2013-02-27T13:47:29.880 回答
0

无论有多少文本，如何在三角形内放置文本？据我所知，仅靠 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>

于 2020-12-29T08:51:25.173 回答