CSS triangle containing text

Question

I have a weird problem at hand and I am struggling to find a solution.

I have created a triangle <div> "container" using only CSS but what I would like now is to insert some text inside the container.
The solution I am aiming for has to contain the text within the boundaries of the triangle no matter how much text is inserted as I am looking to create thumbnails.
An example can be found here [note; this example is very basic and only shows the way I have chosen to create the triangle]

Pushing it a little further, I want to create one triangle facing up and one facing down and the text has to be at the base of each one, so for the 1st triangle the text will be at the bottom and for the 2nd at the top, plan B is just to center the text within the triangle both vertically and horizontally.

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>

Charades

How can the text fit inside the triangle when the triangle has no size? width: 0px; height: 0px;. I'd call this a hack at best. You need to rethink your approach. – Helli

You say you want the text on the base of each triangle. But you also say you want it to be contained by the triangle no matter how much text there is? What outcome are you expecting? If there are 4 lines of text, should it still be at the base with the rest hidden by the triangle? – Accomplice

Answer 1

For your plan B (to center the text within the triangle both vertically and horizontally), which I prefer as solution, you could add this css rule:

.up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Try it here:

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

View on JSFiddle

Ilario

Thanks Werner, thats pretty much the solution i needed. quite simple but very effective. One more question if you will. When I put overflow:hidden attribute it hides the text to, I assume that is due to the strangeness involved with the dimensions but is there a way i can overcome this for background image purposes i.e I want the background image to show only within the triangle? – Charades

The problem is that the div container has width and height equal to 0, so every inner object will be considered overflow. But, if you just want to hide the overflow <p> which appear below, then you can assign a class in your paragraph and in css rule and that's it (look here). I hope my answer is useful for you, in that case vote it – Ilario

Answer 2

How can you fit text inside the triangle, no matter how much text there is? As far as I know, it is not possible with CSS alone. The text that can't fit in will overflow, and you'd need to use Javascript to adjust the font size accordingly to fit all of them.

But suppose that you want a reasonable amount of text to fit inside a right triangle (base is on the left, pointing to the right), here is an approach:

• create a container with fixed width and height to hold the text, and the shapes.
• inside the container, create two divs floated to the right. Each has width 100% and height 50%, shape-outline and clip-path as polygon.
• give these divs background color similar to the background of the rendered page.

The idea is that the part outside these two divs will take the shape of a triangle we are looking for.

In CSS, elements are rectangles, where you realize it or not. It's not about drawing a triangle. It's about creating neighboring elements that suggest a triangle. Hope that makes sense.

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

Wolgast

Answer 3

Use the shape-outside CSS property to define areas around which the code should flow.

.main {
  width: 282px;
  height: 200px;
  position: relative;
  background: blue;
  color: white;
}
.left,
.right {
  width: 50%;
  height: 100%;
  background: white;
}
.left {
  shape-outside: polygon(0% 0, 0% 100%, 100% 0%);
  clip-path: polygon(0% 0, 0% 100%, 100% 0%);
  float: left;
}
.right {
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  float: right;
}
p {
  text-align: center;
}

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
A saepe natus ad incidunt libero in eligendi consequatur non libero commodi
aut ullam ullam non voluptas aliquid.
  </p>
</div>

Deputation