Diagonal Element Nesting Tutorial

Diagonal Element Nesting Tutorial

A variation on yesterday’s Nesting Primer Tutorial, as well as being inspired by that work is today’s …

1. diagonal element … via …
2. nested …
   • display: inline;
   • display: inline-block;

   …

   • sub top^left to bottom^right diagonal componentry element look
   • sup bottom^left to top^right diagonal componentry element look

   … we noticed working (ie. achieving nested “diagonal^ity“) yesterday

… functionality. Yes, this might be thought of as “overkill” compared to …

• hr element rotations … and/or …
• SVG

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

Again, feel free to try out this proof of concept Nested Diagonal Elements web application below …

Previous relevant Nesting Primer Tutorial is shown below.

Nesting Primer Tutorial

The text (which can include emojis) …

• display: inline;
• display: inline-block;

… HTML elements are endlessly fascinating in our eyes, regarding the “nesting” of elements.

You can read all you like about this at a website like W3schools but we find endless surprises, so we decided to code for a web application with scope within a table cell “parent” element …

• reinitialize (ie. append) span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element to the end of table cell content
• nest span or p or font or sup or sub or font or h1 or h2 or h3 or h4 or div element onto the end of the most outer table cell element’s content within the table cell content, or a clicked element flagged with a pink background

We find it interesting changing up the choice above and font-size and new element content textbox settings and seeing what happens. You see the resultant HTML innards below in a textarea element which changes to are reflected above (and in this way, you can pick an element type not listed above, if you like), as are changes to second and on table cell content’s on the top row.

Feel free to try out this proof of concept Nesting web application below …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.