Skip to content

Instantly share code, notes, and snippets.

@ninjapanzer
Created September 13, 2013 13:06
Show Gist options
  • Save ninjapanzer/6550440 to your computer and use it in GitHub Desktop.
Save ninjapanzer/6550440 to your computer and use it in GitHub Desktop.
Rortated headers 45degrees
&.rotated{
tr{
& th:first-child div{
width: 100%;
}
background: transparent;
height: 80px;
&.ie{
background: lighten($body_text_color, 60%);
height: 20px;
& div{
height: 100px;
font-size:11px;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
left: 0px;
border-right: 0px solid;
}
& span{
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
bottom: 60px;
left: 0;
}
}
& th{
height: 3.7em;
vertical-align: bottom;
& td{
padding: 0 0 0 0;
}
& div{
position: relative;
width: 3.5em;
font-size: 12px;
line-height: 0.8;
-ms-transform:skew(-45deg,0deg);
-moz-transform:skew(-45deg,0deg);
-webkit-transform:skew(-45deg,0deg);
-o-transform:skew(-45deg,0deg);
transform:skew(-45deg,0deg);
top: 0px;
height: 100%;
left: 30px;
border-left: 1px solid;
border-right: 1px solid;
border-top: 1px solid;
background:#EEEFEF;
& span{
-ms-transform:skew(45deg,0deg) rotate(315deg);
-moz-transform:skew(45deg,0deg) rotate(315deg);
-webkit-transform:skew(45deg,0deg) rotate(315deg);
-o-transform:skew(45deg,0deg) rotate(315deg);
transform:skew(45deg,0deg) rotate(315deg);
position: absolute;
bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
display: inline-block;
line-height: 1.1;
// width: 100%;
width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
text-align: left;
// white-space: nowrap; /*whether to display in one line or not*/
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment