I've been trying to achieve checkboxes with slanted text like the image below (where some level of overlapping is necessary):
With using the transform styling and setting margins I have been able to get the text to be at the same vertical level, however I am having issues offsetting the elements horizontally so that they appear beside each other.
(this is inside a dynamic table where the rows will be duplicated, which is why I used "span" instead of "label for" to avoid the complications with generating unique id's for all checkboxes)
table tbody {
display: block;
}
.angled_text {
display: block;
margin-top: -18px;
transform: rotate(-45deg);
/* legacy */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}<!DOCTYPE html><html lang="en"><body><table id="dynamic_table"><tbody><tr><td><span class="angled_text">Monday</span><span class="angled_text">Tuesday</span><span class="angled_text">Wednesday</span><span class="angled_text">Thursday</span><span class="angled_text">Friday</span><br><input type="checkbox" name="monday" value="monday"><input type="checkbox" name="tuesday" value="tuesday"><input type="checkbox" name="wednesday" value="wednesday"><input type="checkbox" name="thursday" value="thursday"><input type="checkbox" name="friday" value="friday"></td></tr></tbody></table></body></html>