how do i place text o css shape

[shaibustephen]

I have a css triangle shape with css as below. I find it difficult to have text place inside the triangle css content as it flow outside the triangle

triangle.png

shape. Please, who can guide me on how to have text placed inside the triangle container? View the attachment below

.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

[sozzled]

Try instead:

Code: Select all

.triangle-topleft:before {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
content: '';
}

[shaibustephen]

Thanks for your prompt response. The text is not still fixed inside the container. what should be in content: ''; that you have given

[sozzled]

I tested this myself and it works.

There should be nothing inside the two single quotes.

What type of element are you using as a container for the text?

[shaibustephen]

THis is what i did
<div class="triangle-topleft">
eudo element, we can make two distinct shapes which we can then position one on top of the other. One of the problems you might notice with the CSS in that example, though, is the finicky values for absolutely positioning these two parts together
</div>

.triangle-topleft:before {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
content: '';
}

[sozzled]

OK. So you have a <div class="triangle-topleft">. Good.

And you have some text in that <div>. Good

And you have a </div> tag. Good

And you have added the CSS into a file that is loaded by your template, yes?

I can try to do this by remote control, or I can try to do this by looking at screenshots, or we can solve this in a couple of minutes if you provide us with the URL of website page if the website lives on the internet. It's your choice.

[shaibustephen]

It is in localhost. Kindly view the html attachment

[sozzled]

This looks OK to me. What's your problem with it?

[shaibustephen]

Please send me the html attachment of yours to continue from there. I appreciate your response. Thanks

[sozzled]

You will have to wait until tomorrow. I tell you what, you place this information on a J! Website on the Internet and I'll do the same. OK?

[shaibustephen]

I appreciate
I waiting. Thanks

[sozzled]

Here is a demonstration of red triangle displayed before the text in a <p>: https://j3xdemo.enduring.com.au/blog/red-triangle-test

[shaibustephen]

No No No. You misinterpreted the whole question. I want an instance where my test will be inside the triangle container and not before or after

[sozzled]

I'm sorry but I don't understand your question. What do you mean you want your "test" to be "inside the triangle container"? That does not make sense to me. Please show me what you want on your website; please supply the URL.

[shaibustephen]

What I mean is like this
<div class"triangle-shape">text goes here></div>
I need css that can create triangle shape like above

[sozzled]

It's not a good idea to attempt to place text directly into a <div>. It's better to use a <p> for something like that (e.g. https://www.w3schools.com/w3css/w3css_containers.asp). I don't think you can apply a CSS class (like "triangle-shape") to a <div> to do exactly what you want to do.

As I wrote earlier, my demonstration may not be exactly what you want but, in the short amount of time I spent to put the demo together, it could be used as the basis for something similar for your needs.

I don't think I can help much more with this matter at this time. Best of luck to you.

[Per Yngve Berg]

It's possible with SVG.

https://www.w3schools.com/html/html5_svg.asp