<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #eaf0f2
}
h1{text-align: center}
.box{width:500pxheight:300pxmargin:0 autoposition:relative}
.img-layer{position: absolutewidth: 500pxheight: 300pxtop: 0left: 0overflow: hidden}
.img-layer img {width: 500pxcursor: pointer}
.img-layer:before{ content: ''
position: absolute
top: 0
right: 0
width: 0
height: 0
border-style: solid
border-width: 0
border-color: rgba(0,0,0,0.2) #fff
border-radius: 0 0 0 4px
box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2)
-webkit-transition: all 0.4s ease-out
transition:all 0.4s ease-out}
.img-layer:hover:before{
border-right-width:100px
border-bottom-width:100px
}
</style>
</head>
<body>
<h1>折角效果</h1>
<div class="box">
<div class="img-layer">
<img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
</div>
</div>
</body>
</html>
来源于网络
不知道LZ说的是哪一种折角矩形哦，最好贴个图上来看看，不过一般就内容变化的矩形都是用CSS写出来的，现在CSS3已经有属性支持了，LZ可以学习下，要是用CSS2.0也是可以做到的，不过麻烦点~要用PS做四个圆角图片再加上CSS样式就可以做出随内容而变的圆角矩形了~（只能是单色的哦）
CSS 伪类 用于向某些选择器添加特殊的效果。(折角、抬头、箭头)
锚伪类 就是在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：已被访问状态，未被访问状态，鼠标悬停状态、活动状态(选定)。
a:link{color: #FF0000}/* 未访问的链接 */
a:visited{color: #00FF00}/* 已访问的链接 */
a:hover{color: #FF00FF}/* 鼠标移动到链接上 */(hover可用于所有元素，不只是链接)
a:active{color: #0000FF}/* 选定的链接 */
注:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的a:active 必须被置于 a:hover 之后，才是有效的。链接可以设置字体颜色，字体大小，字体类型，背景颜色等等。
①选择<li>列表中的第一个元素并设置其样式：
li:first-child{background:yellow}
注：和②的区别是，无论是<ul>,还是<ol>，第一个元素样式都是一样
②设置每个<ul>的首个子元素，并设置其样式：
ul>:first-child{background:yellow}
注：只有<ul>中第一个元素改变
③没太理解(如下图)
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
一.加一个空元素，<div class="clear"></div>,然后在css里面写语句clear{clear:both}就可以可清除浮动。(之前7.20写过)
二.在css样式中添加语句overflow:hidden或overflow:auto可以清除浮动，例如为父元素设置容器宽高或设置 *zoom:1。(浮动元素又回到了容器层，把容器高度撑起)等方法
为什么要清除浮动，在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理。
