Page 1 of 1

how do i place text o css shape

Posted: Sun Nov 17, 2019 6:20 pm
by 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;
}

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 7:19 pm
by sozzled
Try instead:

Code: Select all

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

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 8:19 pm
by shaibustephen
Thanks for your prompt response. The text is not still fixed inside the container. what should be in content: ''; that you have given

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 8:23 pm
by 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?

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 8:32 pm
by 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: '';
}

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 8:37 pm
by 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.

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 8:53 pm
by shaibustephen
It is in localhost. Kindly view the html attachment

Re: how do i place text o css shape

Posted: Sun Nov 17, 2019 10:34 pm
by sozzled
This looks OK to me. What's your problem with it?

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 5:17 am
by shaibustephen
Please send me the html attachment of yours to continue from there. I appreciate your response. Thanks

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 10:01 am
by 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?

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 11:57 am
by shaibustephen
I appreciate
I waiting. Thanks

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 7:07 pm
by sozzled
Here is a demonstration of red triangle displayed before the text in a <p>: https://j3xdemo.enduring.com.au/blog/red-triangle-test

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 11:37 pm
by 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

Re: how do i place text o css shape

Posted: Mon Nov 18, 2019 11:39 pm
by 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.

Re: how do i place text o css shape

Posted: Sun Nov 24, 2019 7:33 pm
by 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

Re: how do i place text o css shape

Posted: Sun Nov 24, 2019 7:46 pm
by 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. 8)

Re: how do i place text o css shape

Posted: Sun Nov 24, 2019 9:36 pm
by Per Yngve Berg