效果：
源碼：
<!DOCTYPE html>
<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">
.triangle {
width: 0;
height: 0;
display: inline-block;
border: 10px solid #000000;
}
.triangle div {
width: 0;
height: 0;
position: relative;
border: 8px solid red;
}
.triangle-up, .triangle-up div {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.triangle-up div {
left: -8px;
top: 1px;
}
.triangle-down, .triangle-down div {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.triangle-down div {
left: -8px;
top: -9px;
}
.triangle-left, .triangle-left div {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
.triangle-left div {
left: 1px;
top: -8px;
}
.triangle-right, .triangle-right div {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.triangle-right div {
left: -9px;
top: -8px;
}
</style>
</head>
<body>
<table width="100%" height="800">
<tr>
<td align="center" valign="middle">
<span>Hello World</span>
<div class="triangle triangle-up">
<div></div>
</div>
<div class="triangle triangle-down">
<div></div>
</div>
<div class="triangle triangle-left">
<div></div>
</div>
<div class="triangle triangle-right">
<div></div>
</div>
</td>
</tr>
</table>
</body>
</html>