how do i place text o css shape

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

how do i place text o css shape

Post by shaibustephen » Sun Nov 17, 2019 6:20 pm

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;
}
You do not have the required permissions to view the files attached to this post.
Last edited by toivo on Mon Nov 18, 2019 12:32 am, edited 1 time in total.
Reason: mod note: moved from 3.x Extensions

 
User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Sun Nov 17, 2019 7:19 pm

Try instead:

Code: Select all

.triangle-topleft:before {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
content: '';
}
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Sun Nov 17, 2019 8:19 pm

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

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Sun Nov 17, 2019 8:23 pm

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?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Sun Nov 17, 2019 8:32 pm

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: '';
}

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Sun Nov 17, 2019 8:37 pm

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.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Sun Nov 17, 2019 8:53 pm

It is in localhost. Kindly view the html attachment
You do not have the required permissions to view the files attached to this post.

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Sun Nov 17, 2019 10:34 pm

This looks OK to me. What's your problem with it?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Mon Nov 18, 2019 5:17 am

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

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Mon Nov 18, 2019 10:01 am

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?
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Mon Nov 18, 2019 11:57 am

I appreciate
I waiting. Thanks

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Mon Nov 18, 2019 7:07 pm

Here is a demonstration of red triangle displayed before the text in a <p>: https://j3xdemo.enduring.com.au/blog/red-triangle-test
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Mon Nov 18, 2019 11:37 pm

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

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Mon Nov 18, 2019 11:39 pm

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.
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

shaibustephen
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 225
Joined: Sat Nov 17, 2018 1:52 pm

Re: how do i place text o css shape

Post by shaibustephen » Sun Nov 24, 2019 7:33 pm

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

User avatar
sozzled
Joomla! Exemplar
Joomla! Exemplar
Posts: 8683
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how do i place text o css shape

Post by sozzled » Sun Nov 24, 2019 7:46 pm

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)
https://www.kuneze.com/blog
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 26567
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: how do i place text o css shape

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


 

Post Reply

Return to “Templates for Joomla! 3.x”