How to inscribe text inside a triangle? (CSS)

user_17522514 0
Viewed 114

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 which is bad for seo, text readers, etc. (something like "lor em ip sum" )

what I want to achieve:
enter image description here

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. Does someone have a suggestion? I also searched for a JavaScript library but couldn't find

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

css-shapes css html
2 Answers

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>

user_86203330

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>

user_119743390
Related