用尽量少的DIV 标签配合样式怎么实现下面2图效果（不考虑兼容性，不允许使用图片或背景图）

用尽量少的DIV 标签配合样式如何实现下面2图效果（不考虑兼容性，不允许使用图片或背景图）？
请用尽量少的DIV 标签配合样式分别去实现出下面2图效果，不考虑兼容性，不允许使用图片或背景图的方式去实现，可以使用背景颜色。（图片在下面）
------解决思路----------------------
div{background-color:#000;transform:rotate(-45deg);} 第一个
------解决思路----------------------

<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;}

 第二种