效果图如图1所示:(简单示范,有点丑,莫介意)
PS:兼容IE,FF , chrome ,360安全浏览器
先讲下原理吧,如图2所示:

这个div的样式如下所示:

div{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: lightgreen pink yellow lightblue;
}
解释:当div的宽高为0时,设border的宽度并设颜色,会发现div像是被分割为4个小三角形,
           因此当我们要其中一个小三角时,只需要将其它三个隐藏即可(方法:把那三条边颜色设为transparent即可)。
 
上三角:(图3
 
对应的CSS代码:
 
#triangle{
width: 0px;
height: 0px;
border-width: 20px;
border-style: solid;
border-color: transparent transparent yellow transparent;
}
 
为了让它尽可能适应各种浏览器,我们多添加几行代码(主要是解决IE的兼容问题):
 #triangle{
width: 0px;
height: 0px;
*width: 40px;
*height: 40px;
font-size:;
line-height:;
overflow: hidden;

border-width: 20px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent yellow transparent;

}
解释:
①border-color: transparent transparent yellow transparent;
    因为我们要的是上三角,根据图2,我们要保留的是下边框,故把其他三条边设为transparent;
②border-style: dashed dashed solid dashed;
    把其他三边设为dashed,是因为IE6不支持透明属性transparent,故我们把其它三边的样式设为
    dashed,dashed在边框宽度很大时,会隐藏。(因为我的电脑没有ie6,所以没有实践过,这一点有点抱歉)
③font-size: 0;    line-height: 0;    overflow: hidden;
    如果不加这三句,会出现以下效果:
即在IE下,出现的不是三角形,而是梯形。
④最后多加了两句css hack:  *width: 40px;     *height: 40px;
    当时用IE测试效果时,我发现根本找不到小三角,在网上搜各种博客也搜不到相关问题,后来随手加了句
    width&height的样式,小三角就出现了,感觉应该是在IE下,div的宽高是包括border的(对于这点还是不太懂,希望有大牛给予解答)。
    为了解决IE下的这个问题,我最后就加了这两句css hack。如果觉得不保险,还可以再加上" _width: 40px;     _height: 40px;"
PS: ① IE6和IE7能识别"*",IE6能识别"_",具体搜索“CSS hack”。
      ② *width应设为 border-width 的两倍,*height同理。
 
对于下三角,左三角,右三角,只需改变上三角中的两句CSS即可,其他无需改变,改变的代码分别如下所示。
下三角:
border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;
左三角:
border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;

右三角:

border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
最后,给出效果图1的代码:
 /* css */
*{
margin: 0px;
padding: 0px;
text-align: center;
}
#container{
position: relative; //这句很重要,因为小三角是相对父元素#container来绝对定位的
width: 50px;
height: 40px;
border:1px solid lightblue;
margin: 200px auto;
padding: 20px; }
#chat{
width: 50px;
height: 40px;
background-color: lightblue;
}
#triangle{
position: absolute; //设置小三角绝对定位
width: 0px;
height: 0px;
*width: 14px;
*height: 14px;
font-size:;
line-height:;
overflow: hidden;
border-width: 7px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;
top: 33px; //33px:父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px
left: 70px; //70px: #chat的宽度50px + 父元素#container的内边距20px =70px
}
 
/* html代码 */
<div id="container">
<div id="chat"></div>
<div id="triangle"></div>
</div>
如有不足之处,欢迎批评建议,  O(∩_∩)O谢谢
 

css实现小三角(原理)的更多相关文章

  1. CSS的小三角

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

  2. css制作小三角

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

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

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

  4. CSS实现小三角小技巧

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

  5. CSS生成小三角

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

  6. 纯css制作小三角

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

  7. css的小三角实现的方式

    先上一个简单的例子哈: 此时的方向向下. 如果想方向向上的话用:border-top:0;border-bottom:4px solid; 1. width:0 height:0 border宽度,颜 ...

  8. css 兼容小三角

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

  9. css实现小三角效果

    <!DOCTYPE html><html><head><meta charset="UTF-8"> <title>新闻标 ...

随机推荐

  1. 女生的最爱,装饰品。WPF也有,Adorner。(上海晒衣服理念)

    说到装饰,不由要说到女性. 去年过年回家给我妈买了周大福项链,很明显就感觉待遇就不一样了,即使这样,还是被一个阿姨说应该买更重点的.看来钱这种东西果然是多一点才好.虽然自己无所谓,但让家里人更开心也是 ...

  2. LInux MySQL 数据库 的一些操作

    数据库安装: ………… 创建数据库连接新用户: 1.登录mysql #mysql -u root -p 2.新增用户 insert into mysql.user(Host,User,Password ...

  3. .Net批量插入数据到SQLServer数据库,System.Data.SqlClient.SqlBulkCopy类批量插入大数据到数据库

    批量的的数据导入数据库中,尽量少的访问数据库,高性能的对数据库进行存储. 采用SqlBulkCopy来处理存储数据.SqlBulkCopy存储大批量的数据非常的高效,将内存中的数据表直接的一次性的存储 ...

  4. weblogic配置数据源

    启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台   打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源   ...

  5. 修改input框默认黄色背景

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 ...

  6. HTML的页面IE注释

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  7. 神奇的CSS sprites,制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  8. 楼主,可否发一份代码给我!QQ....

    一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...

  9. iOS开发之远程推送

    说到远程推送,应该用的也挺多的,今天就基于SEA的云推送服务,做一个推送的小demo,来了解一下iOS中的远程推送是怎么一回事儿,首先你得有苹果的开发者账号,好咸蛋也差不多了,主要内容走起. 一.准备 ...

  10. Objective-C中把数组中字典中的数据转换成URL

    可能上面的标题有些拗口,学过PHP的小伙伴们都知道,PHP中的数组的下标是允许我们自定义的,PHP中的数组确切的说就是键值对.而在OC我们要用字典(Dictionary)来存储,当然了Java用的是M ...