CSS triangle containing text
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
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>