border-left border-right border-top border-bottom 能实现特殊形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>资费标准</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px #e3e3e3 solid;
width: 96%;
margin: 0 auto;
margin-top: 30px;
margin-bottom:50px;
}
th, td {
border: 1px solid #e3e3e3;
text-align: center;
font-size: 35px;
line-height: 100px;
background: #C6C7C6;
}
th {
background: #199fff;
color: white;
}
.out {
border-top: 5em #199fff solid;
border-left: 200px #ff8838 solid;
position: relative;
color:white;
}
b {
font-style: normal;
display: block;
position: absolute;
top: -5.3em;
left: -160px;
width: 200px;
}
em {
font-style: normal;
display: block;
position: absolute;
top: -78px;
left: -230px;
width: 200px;
}
.assessDetail td {
background-color: #FFF;
}
</style>
</head>
<body style="background-color: #f0f0f6;color:#404040;">
<table>
<tr>
<th style="width:200px;">
<div class="out" style="font-size:27px">
<b>消费类型</b> <em>通话类型</em>
</div>
</th>
<th>通话时长</th>
<th>虚拟币</th>
</tr>
<tr class="assessDetail">
<td>国内直拨</td>
<td>1 时长/分钟</td>
<td>0.05/分钟</td>
</tr>
<tr class="assessDetail">
<td>国内回拨</td>
<td>2 时长/分钟</td>
<td>0.1/分钟</td>
</tr>
<tr class="assessDetail">
<td>洛杉矶</td>
<td>1 时长/分钟</td>
<td>0.2/分钟</td>
</tr>
<tr class="assessDetail">
<td >温哥华</td>
<td>1 时长/分钟</td>
<td>0.5/分钟</td>
</tr>
<tr class="assessDetail">
<td >香港</td>
<td>1 时长/分钟</td>
<td>0.3/分钟</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
