如何在三角形内刻字？ (CSS)

Question

第一次在外部使用剪切路径和形状时，我尝试在文本被剪切的三角形内写入文本。我已经尝试过 svg 解决方案，但文本变得非常不可读，这对 seo、文本阅读器等不利（类似于“lor em ip sum”）

我想达到的目标：

我正在尝试这个解决方案，它部分起作用，但显然顶部区域不能通过侧面形状“连接”，但我开始认为实现我的想法在 CSS。有人有建议吗？我还搜索了一个 JavaScript 库，但找不到

.container {
    width: 600p;
    height: 600px;
    background: white;
    max-width:600px;
    position:relative;
}

.left-shape{
    shape-outside:  polygon(0% 100%, 0% 0%, 50% 0%);
    clip-path:polygon(0% 100%, 0% 0%, 50% 0%);
    float: left;
    width: 50%;
    height: 100%;
    background:yellow;
}

.right-shape{
    shape-outside: polygon(50% 0%, 100% 0%, 100% 100%);
    clip-path:  polygon(50% 0%, 100% 0%, 100% 100%);
    float: right;
    width: 50%;
    height: 100%;
    background:yellow;
}

.container p {
    position:relative;
    top: 50px
}

<div class="container">
    <div class="left-shape"></div>
    <div class="right-shape"></div>
<p>Aenean ac pellentesque lacus, sit amet posuere nisl. Nunc consequat fermentum bibendum. Sed congue quis est ac pellentesque. Donec euismod turpis et massa pretium condimentum. Mauris id felis a enim consequat elementum non vel nisl. Integer nulla nulla, aliquet sed justo nec, gravida pulvinar purus. Suspendisse venenatis tempor dapibus. Sed ac porttitor mauris, sit amet condimentum lacus. Vivamus convallis risus ac augue mattis finibus. Pellentesque in pharetra felis. Integer vel dictum nibh. Donec nec scelerisque sem. Phasellus hendrerit at dolor eu mattis. Aliquam ac ante velit. Nullam tincidunt nibh ut urna euismod placerat.

</p>
</div>

Answer 1

你快好了，你需要整改了clip-path。您的元素占据了宽度的 50%，因此多边形中不需要 50%

.container {
  height: 600px;
  background: white;
  max-width: 600px;
  position: relative;
}

.container [class*=shape] {
  width: 50%;
  height: 100%;
  background: yellow;
  shape-outside: var(--p);
  clip-path: var(--p);
}

.left-shape {
  --p: polygon(0% 100%, 0% 0%, 100% 0%);
  float: left;
}

.right-shape {
  --p: polygon(0% 0%, 100% 0%, 100% 100%);
  float: right;
}

.container p {
  position: relative;
  top: 50px
}

<div class="container">
  <div class="left-shape"></div>
  <div class="right-shape"></div>
  <p>Aenean ac pellentesque lacus, sit amet posuere nisl. Nunc consequat fermentum bibendum. Sed congue quis est ac pellentesque. Donec euismod turpis et massa pretium condimentum. Mauris id felis a enim consequat elementum non vel nisl. Integer nulla nulla,
    aliquet sed justo nec, gravida pulvinar purus. Suspendisse venenatis tempor dapibus. Sed ac porttitor mauris, sit amet condimentum lacus. Vivamus convallis risus ac augue mattis finibus. Pellentesque in pharetra felis. Integer vel dictum nibh. Donec
    nec scelerisque sem. Phasellus hendrerit at dolor eu mattis. Aliquam ac ante velit. Nullam tincidunt nibh ut urna euismod placerat.

  </p>
</div>

Answer 2

正如@temani-afif 已经回答的那样

我只想添加一件小事来使它变得更好。使用 text-align: justify; 这将使您的文字适合形状。

和

如果开头的断字没问题，你可以玩word-break: break-word;或word-break: break-all;

.container p {
    text-align: justify;
}

.container {
    width: 600p;
    height: 600px;
    background: white;
    max-width:600px;
    position:relative;
}

.left-shape{
    shape-outside:  polygon(0% 100%, 0% 0%, 100% 0%);
    clip-path:polygon(0% 100%, 0% 0%, 100% 0%);
    float: left;
    width: 50%;
    height: 100%;
    background:yellow;
}

.right-shape{
    shape-outside: polygon(0% 0%, 100% 0%, 100% 100%);
    clip-path:  polygon(0% 0%, 100% 0%, 100% 100%);
    float: right;
    width: 50%;
    height: 100%;
    background:yellow;
}

.container p {
    position:relative;
    top: 50px;
    text-align:justify;
    /* word-break: break-word; */
}

<div class="container">
    <div class="left-shape"></div>
    <div class="right-shape"></div>
<p>Aenean ac turpis pellentesque lacus, sit amet posuere nisl. Nunc consequat fermentum bibendum. Sed congue quis est ac pellentesque. Donec euismod turpis et massa pretium condimentum. Mauris id felis a enim consequat elementum non vel nisl. Integer nulla nulla, aliquet sed justo nec, gravida pulvinar purus. Suspendisse venenatis tempor dapibus. Sed ac porttitor mauris, sit amet condimentum lacus. Vivamus convallis risus ac augue mattis finibus. Pellentesque in pharetra felis. Integer vel dictum nibh. Donec nec scelerisque sem. Phasellus hendrerit at dolor eu mattis. Aliquam ac ante velit. Nullam tincidunt nibh ut urna euismod placerat.

</p>
</div>

如何在三角形内刻字？ (CSS)

How to inscribe text inside a triangle? (CSS)

html

css

css-shapes