Optische Illusion

Der Effekt wird ausschließlich durch aufeinander folgende bzw. verschachtelte Block-Level-Elemente erzeugt, deren Rahmen unterschiedlich breit gesetzt sind.

Das Style-Sheet der Original-Zeichnung (enthält nicht die farbigen Rahmen, die auf dieser Seite zur besseren Erkennbarkeit als Inline-Styles eingefügt wurden):

DIV#illusion {
   font-size: 1px;
   background: #000;
   width: 214px;
   padding: 0;
   border: 24px solid #000;
   margin: 30px auto;
   }
DIV#illusion DIV {
   background: #ccc;
   padding: 0;
   border-color: #fff #000;
   border-style: solid;
   margin: 0 auto;
   }
DIV#illusion:hover {
   font-size: 1px;
   background: #fff;
   width: 214px;
   padding: 0;
   border: 24px solid #fff;
   margin: 30px auto;
   }
DIV#illusion:hover DIV {
   background: #000;
   padding: 0;
   border-color: #000 #fff;
   border-style: solid;
   margin: 0 auto;
   }

Das HTML:

<div id="illusion">
<div style="width: 178px; border-width: 2px 2px 0;">
 <div style="width: 162px; border-width: 4px 8px 0;">
  <div style="width: 106px; border-width: 8px 28px 0;">
   <div style="width: 70px; border-width: 9px 18px 0;">
    <div style="width: 54px; border-width: 8px 8px 0;">
     <div style="width: 42px; border-width: 9px 6px 0;">
</div></div></div></div></div></div>
<div style="height: 8px; width: 34px; border-width: 9px 4px 0;"></div>
<div style="width: 34px; border-width: 0 6px 15px;"></div>
<div style="height: 7px; width: 46px; border-width: 0;"></div>
<div style="height: 2px; width: 14px; border-width: 25px 16px 0;"></div>
<div style="height: 2px; width: 14px; border-width: 0 10px 7px;"></div>
<div style="width: 30px; border-width: 5px 2px 0px;">
 <div style="height: 3px; width: 24px; border-width: 3px 3px 3px;"></div></div>
<div style="height: 3px; width: 24px; border-width: 3px 3px 0;"></div>
<div style="width: 24px; border-width: 0 6px 6px;"></div>
<div style="width: 100px; border-width: 0 5px 4px;">
 <div style="width: 86px; border-width: 0 7px 2px;">
  <div style="width: 58px; border-width: 0 14px 2px;">
   <div style="width: 52px; border-width: 0 3px 1px;">
    <div style="width: 46px; border-width: 0 3px 3px;">
     <div style="width: 42px; border-width: 0 2px 7px;">
      <div style="width: 36px; border-width: 0 3px 7px;">
</div></div></div></div></div></div></div>
</div>