css 正反三角形和四个不同颜色方向的梯形

css 正反三角形和四个不同颜色方向的梯形

<style>
#triangle-bottom{ width:0px; height:0px; border:10px solid; border-color:transparent transparent #339966 transparent;/ border-style:dashed dashed solid dashed; }

#triangle-top{ width:0px; height:0px; border:10px solid; border-color:#ff3300 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }

#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }

</style>
 <body>
<div id="triangle-bottom"></div>
<div id="triangle-top" style="margin-top:10px;"></div>
<div id="ladder" style="margin-top:10px;"></div>
 </body>
</html>

效果如下

这是ie下的

 

这是火狐下的

感觉很好吧，不用图也可以，但是从这边也可以看出兼容不是很好，用到页面时也会有一些小问题呢，嘿嘿。。。先收着

posted @ 2012-12-04 14:29  呆呆兔  阅读(380)  评论(1)    收藏  举报