标签：
1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形
2.去掉宽高，每条边都是三角形
3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~
上述代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3—三角形</title> </head> <style> .dib{display: inline-block;} .triangle0{ width:40px; height:40px; border-top:40px solid yellow; border-right:40px solid black; border-bottom:40px solid pink; border-left:40px solid red; } .triangle1{ width:0px; height:0px; border-top:40px solid yellow; border-right:40px solid black; border-bottom:40px solid pink; border-left:40px solid red; } .trianglet{ width:0; height:0; border-top:40px solid yellow; border-right:40px solid transparent; border-left:40px solid transparent; border-bottom:40px solid transparent; } .triangler{ width:0; height:0; border-top:40px solid transparent; border-right:40px solid black; border-bottom:40px solid transparent; border-left:40px solid transparent; } .triangleb{ width:0; height:0; border-top:40px solid transparent; border-right:40px solid transparent; border-bottom:40px solid pink; border-left:40px solid transparent; } .trianglel{ width:0; height:0; border-top:40px solid transparent; border-right:40px solid transparent; border-bottom:40px solid transparent; border-left:40px solid red; } </style> <body> <div class="triangle0 dib"></div> <div class="triangle1 dib"></div> <div class="trianglet dib"></div> <div class="triangler dib"></div> <div class="triangleb dib"></div> <div class="trianglel dib"></div> </body> </html>
希望读到这里对您有所帮助，错误请指正，文章不定期更改或更新，转载请注明出处，方便溯源。
标签：
原文地址：http://www.cnblogs.com/easy-blue/p/5167211.html
