Click here to Skip to main content
13,149,073 members (54,154 online)
Rate this:
Please Sign up or sign in to vote.
See more:
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
Updated 18-Dec-12 2:09am
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.
Rate this: bad
Please Sign up or sign in to vote.

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.
Abhishek Pant 18-Dec-12 9:48am
HashamAhmad 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.
Rate this: bad
Please Sign up or sign in to vote.

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.

Rate this: bad
Please Sign up or sign in to vote.

Solution 3

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

hope it helped!

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.170924.2 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100