您的位置:首页 - web前端
CSS画三角形
纯CSS就可以画出三角形,不需要图片。
使用CSS画各种方向的三角形,上下左右,各种大小颜色等,可以在以下代码基础上进行一些修改得到,实际应用中比如下拉、上弹菜单经常用到。菜单大全

代码如下:
<style>
#keleyi_a{ border-top:10px solid #FFFFCC;
border-left:10px solid #FF3300;
border-bottom:10px solid #FFFFCC;}
</style>
<div id="keleyi_a"></div>

效果如下:


更多例子:
http://keleyi.com/keleyi/phtml/divcss/11.htm

http://keleyi.com/keleyi/phtml/divcss/13.htm

实际应用:
http://keleyi.com/keleyi/phtml/divcss/11a.htm

以下代码兼容IE6:
<style>b.sanjiao{
display:inline-block;
width: 0;
height: 0;
border-width: 10px 10px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #ff0000;
font-size: 0;
line-height: 0;
-moz-transition: -moz-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
vertical-align:text-top;
margin-left:5px
}</style>
<b class="sanjiao"></b>
效果如下:

实际应用:
keleyi菜单

淘宝菜单

其中keleyi菜单的实际应用,可以看看本页下面的向上弹出导航菜单。
本站导航
相关文章
柯乐义 Copyright© keleyi.com