Question 22571 in SEO Question posted in
Some basic information to get you started with this can be found here.

How to inscribe text inside a triangle? (CSS) – SEO

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search