图片
1
图片.png
代码：
<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid yellow;
border-bottom: 30px solid green;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
2
图片.png
代码：
<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>
3
图片.png
代码：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
4
图片.png
代码：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid yellow;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>
同样的以此类推
5
图片.png
代码：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid red;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
注意：
1，可以使用span这样的行内元素设置border ，设置span为绝对定位，父包含块为相对定位，就可以不用为span添加宽度，也可以不用非要使用块级元素。
2，要显示某个边框时，他对应边框可以不用设置
例子：
图片.png
当只给span设置border时，只有下边框可以正常显示为一个三角形
图片.png
案例
一，span行内元素设置border(代码更简洁优雅)
图片.png
图片.png
法一：通过两个三角形块遮盖代码
法二：通过旋转正方形（带边框），利用它的一个角
二，div块级元素设置border
1，
图片.png
代码
2，
图片.png
代码
3，
图片.png
代码
