How to inscribe text inside a triangle? (CSS)-CodePudding

first time working with clip path and shape outside, i'm trying to write text inside a triangle with text being clipped, i already tried svg solutions but text becomes very unreadable wich is bad for seo, text readers etc (something like "lor em ip sum" )

whatIwhantToAchieve

so i was trying this solution, it partially worked but obviously top area can't be "joined" by the side shapes, but i'm starting to think that achieving what i'm thinking is almost impossible in css someone has a suggestion? i also searched for a javascript library but couldn't find

thanks a lot

.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>

CodePudding user response：

You are almost good, you need to rectify the clip-path. Your element is taking 50% of the width so you don't need 50% in the polygon

.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>

CodePudding user response：

As @temani-afif already answered https://stackoverflow.com/a/70141997/11974339

I just want to add one little thing to make this better. Use text-align: justify; which will make your text fit the shape.

And

If breaking word in the starting is no problem for you you can play with word-break: break-word; or 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>