先上一个简单的例子哈：

此时的方向向下。

如果想方向向上的话用：border-top:0;border-bottom:4px solid;

1. width:0 height:0 border宽度，颜色和透明实现。 有例子。

http://www.igooda.cn/jzjl/20140401472.html

2. 还有一种利用图片。（效率没有纯css写的高，但是简单，推荐）

3. 利用一个小的文字图标。 这里边还有一个经典的absolute套absolute的例子。

4. 利用padding之类的。可以的话做一个梯形看看。

=========================================

<style type="text/css">
div{width:0px;/*宽度*/height:0px;/*高度*/ border:60px solid transparent; /*边框*/ /*background:#00cccc; 背景颜色*/}
.mysan{border-left-color:#00cccc;/*边框左颜色*/
border-top-color:#ff0000;/*边框上颜色*/
border-bottom-color:#990000;/*边框下颜色*/
border-right-color:#ccff00;/*边框右颜色*/}
.mysan1{border-left-color:#00cccc;/*边框左颜色*/}
.mysan2{border-top-color:#ff0000;/*边框上颜色*/}
.mysan3{border-bottom-color:#990000;/*边框下颜色*/}
.mysan4{border-right-color:#ccff00;/*边框右颜色*/}
</style>
</head>
<!--身体-->
<body>
<!--div 盒子模型 容器 可以设置高度 宽度 可以放置内容 层 属性=“属性值”-->
<div class="mysan"></div>
<div class="mysan1"></div>
<div class="mysan2"></div>
<div class="mysan3"></div>
<div class="mysan4"></div>
</body>

==================================================

<style type="text/css">
*{padding:0px; margin:0px;}
img{display:block;}
/*css表达方式： 属性：值; 宽度：300m; px 像素*/
#Nav{width:35px;/*宽*/ height:100%;/*高*/ background:#000;/*背景颜色*/
position:fixed;/*固定定位*/ right:100px; top:0px;}
#Nav .top{width:35px; height:150px; background:#d8002d; padding-top:70px; position:relative;/*相对定位*/}
#Nav .middle{width:35px; height:310px; }
#Nav .bottom{width:35px; height:110px; position:absolute;/*绝对定位*/ right:0px; bottom:0px;}
#Nav .top img.email{position:absolute;right:0px; bottom:0px;}
#Nav ul li{list-style-type:none;/*去掉圆点*/ font-family:"微软雅黑";
width:35px; font-size:12px; color:#fff;
text-align:center; position:relative;}
#Nav ul li span{width:90px; height:35px; background:#aaaaaa; display:block;
line-height:35px; position:absolute; top:0px;
left:-120px; opacity:0;/*left:-90px; opacity:1;*/ }
#Nav ul li span font{color:#aaaaaa;font-size:16px; font-family:"宋体";
position:absolute; right:-8px;top:1px;}
#Nav ul li.go{border-top:1px solid #aaa;/*粗细 风格 颜色*/
border-bottom:1px solid #aaa; padding-bottom:5px;}
#Nav ul li.hover{background:#ff0066;}

</style>
</head>

<body>
<!--div盒子模型，高度，宽度，放内容的长方形容器 姓名="清心"-->
<div id="Nav">

<!--上开始-->
<div class="top">
<img src="data:images/nhj.png"/>
<img src="data:images/email.gif" class="email"/>
</div>
<!--上结束-->

<!--中间开始-->
<div class="middle">
<ul>
<li><img src="data:images/logo.png" />
<span>我的特权<font>◆</font></span>
</li>

<li class="go"><img src="data:images/go.png" />购<br/>物<br/>车</li>

<li><img src="data:images/money.png" />
<span>我的资产<font>◆</font></span>
</li>
<li><img src="data:images/xin.png" />
<span>我关注的品牌<font>◆</font></span>
</li>
<li><img src="data:images/start.png" />
<span>我的收藏<font>◆</font></span>
</li>
<li><img src="data:images/see.png" />
<span>我看过的<font>◆</font></span>
</li>
</ul>
</div>
<!--中间结束-->

<!--下面开始-->
<div class="bottom">
<ul>
<li><img src="data:images/xin.png" />
<span>我关注的品牌<font>◆</font></span>
</li>
<li><img src="data:images/start.png" />
<span>我的收藏<font>◆</font></span>
</li>
<li><img src="data:images/see.png" />
<span>我看过的<font>◆</font></span>
</li>
</ul>
</div>
<!--下面结束-->
</div>

<!--引用外部 jqeury　类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#Nav ul li").hover(function(){
if($(this).hasClass("go")){
$(this).find("img").attr("src","images/go2.png");
}
$(this).addClass("hover"); // class="hover"
$(this).find("span").stop().animate({left:"-90px",opacity:1},500);
},function(){
if($(this).hasClass("go")){
$(this).find("img").attr("src","images/go.png");
}
$(this).removeClass("hover"); //移除 class='hover'
$(this).find("span").stop().animate({left:"-120px",opacity:0},500);
});
</script>

css的小三角实现的方式的更多相关文章

  1. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  2. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  3. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  4. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  5. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  6. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

  7. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  8. css 兼容小三角

    <!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...

  9. (转载) css实现小三角（尖角）

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

随机推荐

  1. MyEclipse中SVN的常见的使用方法

    本次主要内容: 一 .导入项目 (Checkout).从svn资源库检出 二 .更新 (Update) 三.锁(对要修改的文件加锁,防止文件冲突) 四.提交(项目修改后的提交) 五.解锁 六.查看历史 ...

  2. jacob 实现Office Word文件格式转换

    关于jacob用法,百度一下就会发现几乎都是复制2004年一个代码,那段代码实现的是从一个目录读取所有doc文件,然后把它转html格式. 为了便习学习和使用,我把代码看懂后精简了一下,得出不少新结论 ...

  3. ORA-01034: ORACLE not available如何解决

    一个小小的问题,让我折腾了一个上午,下午三点彻底解决了,分享一个给大家解决方法,尽管在测试服务器上,但是经验是值得总结和分享的. ERROR:ORA-01034: ORACLE not availab ...

  4. 项目回顾1-图片上传-form表单还是base64-前端图片压缩

    第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...

  5. Unity-WIKI 之 SplashScreen

    组件功能 在屏幕上的一个启动画面消失,等待几秒钟(或等待用户输入),然后淡出,下一个场景加载. 组件源码 using UnityEngine; using System.Collections; // ...

  6. mysql乱码的好文

    1. http://www.blogjava.net/wldandan/archive/2007/09/04/142669.html 2. http://www.111cn.net/database/ ...

  7. Genymotion出现unknown generic error和This may occur if you are using a proxy错误的解决方案

    今天在实验室希望在Genymotion上多下载几个模拟器,需要重新登录帐号,却发现一个错误,叫做unknown generic error.前几天还出现过一个很诡异的问题.截图如下: . (1)unk ...

  8. Android开发EditText属性

    Android开发EditText属性 EditText继承关系:View-->TextView-->EditText EditText的属性很多,这里介绍几个:android:hint= ...

  9. JAVA 根据数据库表内容生产树结构JSON数据

    1.利用场景 组织机构树,通常会有组织机构表,其中有code(代码),pcode(上级代码),name(组织名称)等字段 2.构造数据(以下数据并不是组织机构数据,而纯属本人胡编乱造的数据) List ...

  10. StaticFileMiddleware中间件如何处理针对文件请求

    StaticFileMiddleware中间件如何处理针对文件请求 我们通过<以Web的形式发布静态文件>和<条件请求与区间请求>中的实例演示,以及上面针对条件请求和区间请求的 ...