2.1.8.2.1. Decorator pattern

The decorator is a pattern to create a contour or a curve around an area. To achieve this effect, you need to create 9 cells. The BODY is the central area for you to decorate. The other 8 cells are distributed around the BODY cell. You can use the width, height and background image properties to achieve any desired decoration effects.




<div class="Parent">

  <div class="TopLeft">

    <div class="TopRight">

      <div class="TopCenter"><span></span></div>

    </div>

  </div>

  <div class="CenterLeft">

    <div class="CenterRight">

      <div class="CenterCenter">BODY</div>

    </div>

  </div>

  <div class="BottomLeft">

    <div class="BottomRight">

      <div class="BottomCenter"><span></span></div>

    </div>

  <div>

</div>