How to make an Irregular shape divs with CSS

10 years ago

For a T-shaped div you'd need to use 2 separate divs. One div for the vertical part and another div for the part going horizontally across the top. You may also need to contain these within a further div.. hope that makes sense!

Alternatively, you could have a large square, with a small square on the bottom left and bottom right which you could have the text/content avoiding - thus giving a "T" illusion.

Out of interest what do you want to make an irregular shape for? Most problems can be solved with simpler methods!

Thanks
1 reply

{{ DiscussionBoard.errors[8146167].message }}

merkv

10 years ago

Originally Posted by Seiryuu

For a T-shaped div you'd need to use 2 separate divs. One div for the vertical part and another div for the part going horizontally across the top. You may also need to contain these within a further div.. hope that makes sense!

Alternatively, you could have a large square, with a small square on the bottom left and bottom right which you could have the text/content avoiding - thus giving a "T" illusion.

Out of interest what do you want to make an irregular shape for? Most problems can be solved with simpler methods!

Thanks for the advise, there's nothing particular with "T" shape, i just thought of it as a complicated figure, since all div shapes are just rectangle, square, rounded corners, triangles or circles.
.
The Irregular shape i want to use it for is for icons,
for example a T icon(sorry i used this figure again..)yes it can be done by combining 2 divs, but can it be hovered as one element? without enclosing it in a container.

This may sound weird, but what i watn to achieve is to create an irregular shape div which is consider as one element , without combining 2 or more divs together.

Sorry i'm still a beginner and trying to make my own webpage thru local host at my PC, I'm just trying to learn more complicated methods rather than the basics.

Thanks
2 replies

{{ DiscussionBoard.errors[8146244].message }}

Brandon Tanner

10 years ago

Originally Posted by merkv

The Irregular shape i want to use it for is for icons,
for example a T icon(sorry i used this figure again..)yes it can be done by combining 2 divs, but can it be hovered as one element? without enclosing it in a container.

This may sound weird, but what i watn to achieve is to create an irregular shape div which is consider as one element , without combining 2 or more divs together.

The way you would do that is to give all of your div's that make up the "T" the same class, like...

HTML Code:

<div class="Tclass" id="topT"></div>
<div class="Tclass" id="bottomT"></div>

Then you can manipulate everything in the "Tclass" as if it's a single item, via Javascript. For example, if you want to change the background color of all div's in the Tclass to red when they are hovered over, this is how you would do it in jQuery...

HTML Code:

$(".Tclass").hover(function(){
    $(".Tclass").css("background-color","red");
});

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[8146330].message }}

merkv

10 years ago

Originally Posted by Brandon Tanner

The way you would do that is to give all of your div's that make up the "T" the same class, like...

HTML Code:

<div class="Tclass" id="topT"></div>
<div class="Tclass" id="bottomT"></div>

Then you can manipulate everything in the "Tclass" as if it's a single item, via Javascript. For example, if you want to change the background color of all div's in the Tclass to red when they are hovered over, this is how you would do it in jQuery...

HTML Code:

$(".Tclass").hover(function(){
    $(".Tclass").css("background-color","red");
});

Thanks this is what i need, by the way .. this is a non css question,i'm still new to jquery... how do i call that function?

thanks again...

Thanks
1 reply

{{ DiscussionBoard.errors[8146520].message }}

Brandon Tanner

10 years ago

Originally Posted by merkv

Thanks this is what i need, by the way .. this is a non css question,i'm still new to jquery... how do i call that function?

thanks again...

That function is automatically executed whenever the user's mouse hovers over a "Tclass" div.

So for example, if that was the only jQuery code you want to run on the page, then you would do this...

HTML Code:

<script>
    $(function(){  // Tells the browser to wait until the document is ready
        $(".Tclass").hover(function(){  // When a "Tclass" div is hovered over...
            $(".Tclass").css("background-color", "red");  // Change the BG color to red
        });
    }); 
</script>

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[8147112].message }}

Michael71

10 years ago

Why using jQuery for a simple hover that can be done via CSS?

Originally Posted by Brandon Tanner

That function is automatically executed whenever the user's mouse hovers over a "Tclass" div.

So for example, if that was the only jQuery code you want to run on the page, then you would do this...

HTML Code:

<script>
    $(function(){  // Tells the browser to wait until the document is ready
        $(".Tclass").hover(function(){  // When a "Tclass" div is hovered over...
            $(".Tclass").css("background-color", "red");  // Change the BG color to red
        });
    }); 
</script>

[ 1 ] Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8147131].message }}

Brandon Tanner

10 years ago

Originally Posted by Michael71

Why using jQuery for a simple hover that can be done via CSS?

Because the OP may want to do something more complex than simply changing the background color (like maybe call another function, etc), when a user hovers over a div. I only used 'background color' as an example.

Thanks
1 reply

Signature

{{ DiscussionBoard.errors[8147216].message }}

Patrick

10 years ago

Originally Posted by Brandon Tanner

Because the OP may want to do something more complex than simply changing the background color (like maybe call another function, etc), when a user hovers over a div. I only used 'background color' as an example.

If the OP really wants to use it then it won't work due to the thing below missing...... and then again its the basics ..

Thanks
1 reply

{{ DiscussionBoard.errors[8147299].message }}

Brandon Tanner 10 years ago

Originally Posted by Patrick

If the OP really wants to use it then it won't work due to the thing below missing...... and then again its the basics ..

OK... if you want to play that game, then don't forget about this part too...

<html>

:rolleyes:
- [ 2 ] Thanks
- 1 reply
Signature
{{ DiscussionBoard.errors[8147455].message }}
- Patrick 10 years ago
  
  Originally Posted by Brandon Tanner
  
  OK... if you want to play that game, then don't forget about this part too...
  
  <html>
  
  :rolleyes:
  
  Nope I used to play video games when I was in school, but the fact is that when someone gets education, they should get from the basics, not just jump to some code and then think about the basics...:rolleyes:
  
  Moreover the OP asked a simple solution which can be done through CSS, don't understand what's the point of making him jump to jQuery (when he specified that he is a beginner) for that and creating more confusion in his mind....:confused: (unless you want him to get really confused and follow your signature )
  
  Now if you again found this a "game", you can create another sentence of funny post and get "thanks" for it :p
  
  Thanks
  
  {{ DiscussionBoard.errors[8148088].message }}

Michael71

10 years ago

When you master the basics you can start to learn complicated stuff.

Originally Posted by merkv

Thanks for the advise, there's nothing particular with "T" shape, i just thought of it as a complicated figure, since all div shapes are just rectangle, square, rounded corners, triangles or circles.
.
The Irregular shape i want to use it for is for icons,
for example a T icon(sorry i used this figure again..)yes it can be done by combining 2 divs, but can it be hovered as one element? without enclosing it in a container.

This may sound weird, but what i watn to achieve is to create an irregular shape div which is consider as one element , without combining 2 or more divs together.

Sorry i'm still a beginner and trying to make my own webpage thru local host at my PC, I'm just trying to learn more complicated methods rather than the basics.

Thanks

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[8147134].message }}

Brandon Tanner

10 years ago

All div's are rectangular. Actually, that's not entirely true, because you can make circular shaped div's as well if you use border-radius (but that's a CSS3 trick, so it won't work in older browsers).

Of course, there's nothing preventing you from arranging multiple div's together in the shape of a T.

Thanks

Signature

{{ DiscussionBoard.errors[8146192].message }}

Andrew H

10 years ago

haha -> don't forget the body tags too! <body>

Thanks
1 reply

Signature

"You shouldn't come here and set yourself up as the resident wizard of oz."

{{ DiscussionBoard.errors[8147582].message }}

Patrick 10 years ago

Originally Posted by Andrew H

haha -> don't forget the body tags too! <body>

Wrong...

After <html> comes <head> "haha"
- Thanks
{{ DiscussionBoard.errors[8148159].message }}

Edge360

10 years ago

How about this link? CSS3 Shapes | CSS3 Shapes Resource

Some great CSS3 effects here, just be careful with older browsers, maybe use a fallback stylesheet and use an image replacement instead

Thanks
1 reply

{{ DiscussionBoard.errors[8148623].message }}

longblog

10 years ago

Originally Posted by Edge360

How about this link? CSS3 Shapes | CSS3 Shapes Resource

Some great CSS3 effects here, just be careful with older browsers, maybe use a fallback stylesheet and use an image replacement instead

That page you linked is an excellent resource. I don't really see the point though, because everything is still constrained to a rectangle by the surrounding divs.

Most designers just use graphical elements within standard divs to achieve what I believe the OP is trying to accomplish. If you want a T shaped logo, then you just use a rectangular div, and have the logo background either match the website background, or use a png with transparency. Am I missing something here, or is the OP making this excessively complicated out of lack of experience?

Thanks

Signature

Are you ready to make an extra $1300 this month? Click here to find out how easy it is!

Complete All-in-One WordPress Training - Sign up now!

{{ DiscussionBoard.errors[8153338].message }}

ColorVila

10 years ago

CSS3 can achieve what you want. And javascript is another good choice.

Thanks

{{ DiscussionBoard.errors[8152194].message }}

JamesLennon

10 years ago

FYI you dont need to write <html> <head> or even <body> if you don't want

Thanks
1 reply

Signature

Follow my blog on creating an authority site

{{ DiscussionBoard.errors[8154262].message }}

longblog 10 years ago

Originally Posted by JamesLennon

FYI you dont need to write <html> <head> or even <body> if you don't want

DONT TELL PEOPLE THAT! There's already too much fugly code floating around without any regard to the next guy that has to work on their POS.
- Thanks
- 1 reply
Signature
Are you ready to make an extra $1300 this month? Click here to find out how easy it is!

Complete All-in-One WordPress Training - Sign up now!
{{ DiscussionBoard.errors[8154441].message }}
- JamesLennon 10 years ago
  
  Originally Posted by longblog
  
  DONT TELL PEOPLE THAT! There's already too much fugly code floating around without any regard to the next guy that has to work on their POS.
  
  Ha ha ha
  
  Not saying I ever leave it out
  
  Thanks
  
  Signature
  
  Follow my blog on creating an authority site
  
  {{ DiscussionBoard.errors[8154601].message }}

How to make an Irregular shape divs with CSS

Trending Topics

How is best to manage multiple GMB logins?

delegate ads to freelancers

Best quote I've heard in a while...

What Do You Think Is the Best Way to Promote Digital Products for Free?

Marketplace thread approval