The basic markup is similar to the previous method; it requires four elements to apply the
four corner masks to:

       <div class="box">
         <div class="box-outer">
            <div class="box-inner">
            <h2>Headline</h2>
            <p>Content</p>
            </div>
         </div>
       </div>
The CSS is also very similar:
       .box {
         width: 20em;
         background: #effce7 url(images/bottom-left.gif)
         no-repeat left bottom;
       }

.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
                                                                   3
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

Comments are closed.