Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML HTML5/CSS
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 23:05pm
Edited 18-Dec-12 3:09am
v2
Comments
Avinash_Pathak at 18-Dec-12 6:27am
   
take two div in your td and pass different color to them...
deepakdynamite at 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 at 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
good
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.
  Permalink  
Comments
Abhishek Pant at 18-Dec-12 9:48am
   
:D
Rate this: bad
good
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.
 
Thanks
  Permalink  
Rate this: bad
good
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!
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 210
2 BillWoodruff 205
3 Jochen Arndt 180
4 DamithSL 165
0 OriginalGriff 5,130
1 DamithSL 4,157
2 Maciej Los 3,670
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,821


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 18 Dec 2012
Copyright © CodeProject, 1999-2014
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