rooftop demo

You can get the ‘rooftop’ effect by placing a div with the rooftop image inside the div with the double border.  The rooftop image is a .png file similar to this:

rooftop

The area outside the top is transparent.  Your image will need to be slightly different to make the corners match up correctly, but this should give you the idea.

Here is the code I used to test this image:

<style>
.top-pitch { position: absolute; top: -64px; }
#outer {
   background-color: brown;
   width: 500px;
   height: 500px;
}
#inner {
   background-color: white;
   border: 10px double black;
   height: 80%;
   margin: 20px;
   position: relative;
   top: 50px;
}
</style>
<div id='outer'>
   <div id='inner'>
      <div class='top-pitch'><img src="http://localhost/test/wp-content/uploads/rooftop.png" width="120px" /></div>
   </div>
</div>

And here is a screenshot of the result:

rooftop-demo

Leave a Reply

Your email address will not be published. Required fields are marked *

*