How to make an Irregular shape divs with CSS

by 20 replies
24


#website design #css #divs #irregular #make #shape
  • 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!
    • [1] reply
    • 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.
      • [2] replies
  • 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.
  • haha -> don't forget the body tags too! <body>
    • [1] reply
    • [DELETED]
    • Wrong...

      After <html> comes <head> "haha"
  • 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
    • [1] reply
    • 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?
  • CSS3 can achieve what you want. And javascript is another good choice.
  • FYI you dont need to write <html> <head> or even <body> if you don't want
    • [1] reply
    • 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.
      • [1] reply
Join the discussion

Next Topics on Trending Feed