如果你非要是用div+css，我给你一个思路。
利用border的特性，border-left和border-bottom的颜色设置成白色，border-top和border-right设置成蓝色，这样视觉上得到你想要的效果。
你可以参考梦想天空的这篇文章：http://www.cnblogs.com/lhb25/archive/2013/02/19/css-triangle.html
如果想用css 弄出个倒三角的话, 只能使用border了, 可以这样写, 写一个div 宽高都是0px , 把border其他都设置成10px solid transparent再把border-top:10px solid red 这样看起来 就能挤成个倒三角 比如::: <div style="width:0pxheight:0pxborder-top:100px solid redborder-left:150px solid transparentborder-bottom:50px solid transparentborder-right:150px solid transparent"></div>只设置border三个方向的值，另一个方向就会汇聚成一个点，就出现三角形了，希望对你有帮助，望采纳！
#triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
下面是个示例：
