two colors in td as background

Question

0.00/5 (No votes)

See more:

HTML

HTML5

I want to create square shaped table cell

which will have grey color in lower triangle and blue in upper triangle.

Posted 17-Dec-12 22:05pm

deepakdynamite

Updated 18-Dec-12 2:09am

v2

Add a Solution

Comments

Avinash_Pathak 18-Dec-12 6:27am

take two div in your td and pass different color to them...

deepakdynamite 18-Dec-12 6:40am

Yes that can be done but shape is some like [\] square divided by back slash... your suggestion won't work in this case

Niral Soni 18-Dec-12 7:10am

What is the agenda behind this question ? through HTML/CSS its not possible to create any shape other than rectangle/square.

You can create two different triangle images with required colors and set them as a background of div, position div elements such that your required shape gets created.

Or else, make use of CANVAS tag in HTML to achieve this.

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hasham Ahmad · Answer 1 · 2012-12-18T03:36:00

Solution 1

Create an image with different colors in the triangle shape according to your requirements and then place it as the td background image.

you cannot just set the two different colors shape wise using just HTML or CSS.

using image is a better option.

Posted 18-Dec-12 3:36am

Hasham Ahmad

Comments

Abhishek Pant 18-Dec-12 9:48am

:D

[no name] 18-Dec-12 10:33am

the tutorial u have posted is great ... thanx for contributing, but i would love to implement the requirements given above using the tutorial, any sample code is welcome.

M.Edmison · Answer 2 · 2012-12-18T03:50:00

Solution 2

Create the image in paint or a graphics designer like adobe photoshop or which ever you prefer, then add it to the page.

Then you can adjust the transperency to it to give it a specific effect.

That can't fail.

Thanks

Posted 18-Dec-12 3:50am

M.Edmison

*Abhishek Pant* · Answer 3 · 2012-12-18T03:57:00

Solution 3

Design this using Canvass or Gradients
Backgrounds & Gradients[^]
A Developer’s Guide to HTML5 Canvas[^]

hope it helped!

Posted 18-Dec-12 3:57am

Abhishek Pant