下面是一些三角形样式，部分我在仿站练习时，用到了的图案，加了点颜色美化，记录一下…
各种三角形的效果图和代码记录
三角形，倒三角形，左三角形，右三角形
上三角
效果图：
代码样式：
#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #f44336;
}右三角
效果图：
代码样式：
#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid #2196f3;
}下三角
效果图：
代码样式：
#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #e91e63;
}左三角
效果图：
代码样式：
#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid #9c27b0;
}左上直角三角形
效果图：
代码样式：
#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-right: 100px solid transparent;
border-top: 100px solid #ff5722;
}右上直角三角形
效果图：
代码样式：
#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-left: 100px solid transparent;
border-top: 100px solid #ffca28;
}右下直角三角形
效果图：
代码样式：
#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-right: 100px solid transparent;
border-bottom: 100px solid #4caf50;
}左下直角三角形
效果图：
代码样式：
#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-left: 100px solid transparent;
border-bottom: 100px solid #009688;
}
发表回复