{"id":71813,"date":"2026-01-26T03:01:00","date_gmt":"2026-01-25T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=71813"},"modified":"2026-01-26T20:39:30","modified_gmt":"2026-01-26T10:39:30","slug":"diagonal-element-nesting-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/diagonal-element-nesting-tutorial\/","title":{"rendered":"Diagonal Element Nesting Tutorial"},"content":{"rendered":"
\"Diagonal<\/a>

Diagonal Element Nesting Tutorial<\/p><\/div>\n

A variation on yesterday’s Nesting Primer Tutorial<\/a>, as well as being inspired by that work is today’s …<\/p>\n

    \n
  1. diagonal element … via …<\/li>\n
  2. nested …\n
      \n
    • display: inline;<\/li>\n
    • display: inline-block;<\/li>\n<\/ul>\n

      … <\/p>\n

        \n
      • sub<\/i><\/a> topleft<\/sup> to bottomright<\/sup> diagonal componentry element look<\/li>\n
      • sup<\/i><\/a> bottomleft<\/sup> to topright<\/sup> diagonal componentry element look<\/li>\n<\/ul>\n

        … we noticed working (ie. achieving nested “diagonal<\/a>it<\/sup>y<\/a>“) yesterday<\/font>\n<\/li>\n<\/ol>\n

        … functionality. Yes, this might be thought of as “overkill” compared to …<\/p>\n

          \n
        • hr<\/i> element rotations … and\/or …<\/li>\n
        • SVG<\/li>\n<\/ul>\n

          … arguably easier means to achieve a “diagonal element” look. Nevertheless, the more ways to achieve an objective up your sleeve, the better, we reckon!<\/p>\n

          Again, feel free to try out this proof of concept<\/a> Nested Diagonal Elements<\/a> web application below …<\/p>\n