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>

Answer 1

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>

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>

Answer 3

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