疑点：希奇了，为什么实际上并不是我们想要的效果？我们在看一下问题出在哪，应该是我们定义的第三个角的背景图盖住了右上cssbox_head中的角，解决的方法有两种：
　　第一种：H2可以加一个右边界这样H2的背景就不会在盖住cssbox_head的的那个角了；
　　第二种：反向思维，cssbox_head中加入一个右补白，这样H2中的背景图也不会盖住cssbox_head中的角；
　　这里我们选用第二种方法．

Example Source Code []

.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}

　　执行代码：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

第四步
　　这一步和第三步很相似，这里就不会在犯错误了，根据实际情况只能选用第一种方法．
　　css代码

Example Source Code []

*{
padding:0;
margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{
background: transparent url() no-repeat;
}
.cssbox{
background-position:bottom right;
width:380px;
margin:20px auto;
}
.cssbox_head{
background-position:top right;
padding-right:10px;
}
.cssbox_head h2{
background-position:top left;
padding:10px 0 10px 10px;
}
.cssbox_body{
background-position:bottom left;
margin-right:10px; /* interior-padding right */
padding:0px 0 10px 10px;
}

　　完整的代码：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

最终效果图

　　终于完成我们的＂大作＂了！从上面我们可以看出，定义这种效果的样式是先从父元素到子元素定义的，也就是从外层向内层定义，这是因为，越是内层的的图／背景，它在显示时确是在外层的．
　　在内容区假如P或其它元素有边界的情况下会出现边界叠加现象，在这里只要给cssbox_body加入一个1PX下补白就可以解决这种问题的发生，关于边界叠加见网站中＜边界叠加＞这篇文章．
　　本文作者：purecss