CSS Element Function Basic

<!DOCTYPE html>
<title>My Example</title>

/* The element where we apply the background image */
  .reflection-box {
    width: 200px;
    height: 100px;
    border: 2px dashed #ccc;
    
    /* Firefox prefix */
    background-image: -moz-element(#source-box);
    
    /* Standard syntax */
    background-image: element(#source-box);
    
    /* Optional: adjust how the mirrored image fits */
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
  }
</style>

<div id="source-box">
  I am the original HTML element!
</div>

<div class="reflection-box"></div>

<div class="warning-msg">
  <em>Note: The dashed box above will only display a reflection of the orange box if your browser supports the element() function (currently mainly Firefox).</em>
</div>