Skip to content

Instantly share code, notes, and snippets.

@kertnik05

kertnik05/index.html

Last active October 5, 2023 21:26
Show Gist options
  • Save kertnik05/caef86bbceaae6810c253bd506fa7702 to your computer and use it in GitHub Desktop.
Save kertnik05/caef86bbceaae6810c253bd506fa7702 to your computer and use it in GitHub Desktop.
Download ZIP
html table cell split diagonally
Raw
index.html
<!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>
Raw
style.css
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