次の 2 つの画像効果を実現するために、できるだけ少ない DIV タグとスタイルを使用するにはどうすればよいですか (互換性に関係なく、画像や背景画像の使用は許可されません)。 _html/css_WEB-ITnose

以下の 2 つの画像の効果を実現するには、できるだけ少ない数の DIV タグとスタイルを使用してください。互換性に関係なく、画像や背景画像は使用できません。 (下の写真)

ディスカッションへの返信 (解決策)

写真 1:



写真 2:

div{background-color:#000 ;変換フォーム:回転(-45度);} 最初の

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

2 番目の