compositing/reflections/deeply-nested-reflections.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <style type="text/css" media="screen">
    
    div {
      -webkit-box-sizing: border-box;
      border: 1px solid black;
      margin: 2px;
    }

    .level4 {
      width: 234px;
      height: 240px;
      border-color: black;
      -webkit-box-reflect: below 4px;
    }

    .level3 {
      width: 228px;
      height: 234px;
      border-color: orange;
      -webkit-box-reflect: right 4px;
    }

    .level2 {
      width: 222px;
      height: 112px;
      border-color: blue;
      -webkit-box-reflect: below 4px;
    }
    
    .level1 {
      width: 106px;
      height: 106px;
      border-color: red;
      -webkit-box-reflect: right 4px;
    }
    
    .box {
      width: 100px;
      height: 100px;
      text-align: center;
      font-size: 48pt;
      background-color: green;
    }
    .compositing {
      -webkit-transform: translateZ(0);
    }
    
  </style>
  
</head>
<body>
  
  <p>Deeply nested reflections.</p>
  <div class="level4">
    <div class="level3">
      <div class="level2">
        <div class="level1">
          <div class="compositing box">C</div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>