css制作三角形
1. i 标签方式
width: 0;
height: 0;
display: inline-block;
/* 正三角形 /
border-width: 5px 5px 5px 5px;
/ 左三角形 /
border-width: 5px 0 5px 10px;
border-style: solid;
/ 默认背景色 */
border-color: transparent ;
border-left-color: #717171;
代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
i {
width: 0;
height: 0;
display: inline-block;
border-style: solid;
/* 默认背景色 */
border-color: transparent;
border-left-color: #717171;
}
i.left {
/* 左三角形 */
border-width: 5px 0 5px 10px;
}
i.zheng {
/* 正三角形 */
border-width: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<i class="zheng"></i><span>正三角形</span>
<i class="left"></i><span>左三角形</span>
</div>
</body>
</html>
具体就是改这个边框!!!
显示效果: