核心提示：效果：源码：!DOCTYPE htmlhtml xmlns=https://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=...
效果：
源码：
<!DOCTYPE html>
<html xmlns="https://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 p {
width: 0;
height: 0;
position: relative;
border: 8px solid red;
}
.triangle-up, .triangle-up p {
border-left-color: transparent;
border-right-color: transparent;
border-top-style: none;
}
.triangle-up p {
left: -8px;
top: 1px;
}
.triangle-down, .triangle-down p {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-style: none;
}
.triangle-down p {
left: -8px;
top: -9px;
}
.triangle-left, .triangle-left p {
border-top-color: transparent;
border-bottom-color: transparent;
border-left-style: none;
}
.triangle-left p {
left: 1px;
top: -8px;
}
.triangle-right, .triangle-right p {
border-top-color: transparent;
border-bottom-color: transparent;
border-right-style: none;
}
.triangle-right p {
left: -9px;
top: -8px;
}
</style>
</head>
<body>
<table width="100%" height="800">
<tr>
<td align="center" valign="middle">
<span>Hello World</span>
<p class="triangle triangle-up">
<p></p>
</p>
<p class="triangle triangle-down">
<p></p>
</p>
<p class="triangle triangle-left">
<p></p>
</p>
<p class="triangle triangle-right">
<p></p>
</p>
</td>
</tr>
</table>
</body>
</html>
