把border进行旋转:
border: 2px solid #FFF
-webkit-transform: rotate(204deg)
预览效果页面:
http://each.sinaapp.com/game/index.html
div有斜角的话,建议使用css3的新特性,比js的要方便省力,将要旋转的div增加如下属性:transform:rotate(7deg)
7deg指的是旋转角度,前边数字取值范围为0-360度,按需求使用即可
首先,用背景图片最简单;如果你非要是用div+css,我给你一个思路。
利用border的特性,border-left和border-bottom的颜色设置成白色,border-top和border-right设置成蓝色,这样视觉上得到你想要的效果。
你可以参考梦想天空的这篇文章:http://www.cnblogs.com/lhb25/archive/2013/02/19/css-triangle.html