<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>
来源于网络
如果网页背景是白色的，可以设一个小的span定在想实现半角的那个地方，设置宽高为0，给设置边框 例如<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>带缺角的水平菜单 </title>
<style>
#menu{ font-family:Arialfont-size:14px}
#menu a , #menu a:visited{ float:leftdisplay:blockposition:relativebackground:#c00color:#ffftext-decoration:nonepadding:6px margin:1px 0 0 1px }
#menu a span{ height:0width:0border-bottom:6px solid #c00border-left: 6px solid #fffposition:absolutetop:0left:0overflow:hidden}
#menu a:hover{ color:#333background:#f90}
#menu a:hover span{ border-bottom:6px solid #f90}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
不知道LZ说的是哪一种折角矩形哦，最好贴个图上来看看，不过一般就内容变化的矩形都是用CSS写出来的，现在CSS3已经有属性支持了，LZ可以学习下，要是用CSS2.0也是可以做到的，不过麻烦点~要用PS做四个圆角图片再加上CSS样式就可以做出随内容而变的圆角矩形了~（只能是单色的哦）
