-
-
Save arunrreddy/53f632aac8a86a12f18d1acc4cc5c2fc to your computer and use it in GitHub Desktop.
html table cell split diagonally
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>HTML Table Cell Split Diagonally</title> | |
</head> | |
<body> | |
<table> | |
<tr> | |
<td> | |
<div class="c1">A</div> | |
<div class="c2">B</div> | |
</td> | |
<td> | |
<div class="c1">C</div> | |
<div class="c2">D</div> | |
</td> | |
<td> | |
<div class="c1">E</div> | |
<div class="c2">F</div> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
<div class="c1">G</div> | |
<div class="c2">H</div> | |
</td> | |
<td> | |
<div class="c1">I</div> | |
<div class="c2">J</div> | |
</td> | |
<td> | |
<div class="c1">K</div> | |
<div class="c2">F</div> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
td { | |
padding: 50px; | |
border: 2px solid black; | |
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(49%, white), color-stop(50%, black), color-stop(51%, white)); | |
background-image: -webkit-linear-gradient(top left, white 49%, black 50%, white 51%); | |
background-image: -o-linear-gradient(top left, white 49%, black 50%, white 51%); | |
background-image: linear-gradient(to bottom right, white 49%, black 50%, white 51%); | |
} | |
td .c1 { | |
-webkit-transform: translate(-20px,-20px); | |
-ms-transform: translate(-20px,-20px); | |
transform: translate(-20px,-20px); | |
} | |
td .c2 { | |
-webkit-transform: translate(20px,20px); | |
-ms-transform: translate(20px,20px); | |
transform: translate(20px,20px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment