How to use as few DIV tags and styles as possible to achieve the following two picture effects (regardless of compatibility, the use of pictures or background pictures is not allowed)? _html/css_WEB-ITnose

Please use as few DIV tags and styles as possible to achieve the effects of the two images below. Regardless of compatibility, images or background images are not allowed to be used. Background colors can be used. (Pictures below)

Reply to discussion (solution)

Picture 1:



Picture 2:

div{background-color:#000;transform:rotate(-45deg);} first

<div style="overflow:hidden;_height:1%;">	<div class="a"></div>	<div class="a b"></div></div><div style="overflow:hidden;">	<div class="aa"></div>	<div class="aa bb"></div></div><div class="aaa"></div><div style="overflow:hidden;">	<div class="aa"></div>	<div class="aa bb"></div></div><div style="overflow:hidden;_height:1%;">	<div class="a"></div>	<div class="a b"></div></div>

.a{ width:10px; height:10px; background-color:#000; float:left;}.b{ margin-left:70px;}.aa{ width:20px; height:20px; background:#000; float:left; margin-left:10px;}.bb{ margin-left:30px;}.aaa{ margin-left:30px; height:30px; width:30px; background:#000;}

The second type