.triangle {
width: 10px;
height: 10px;
overflow: hidden;
border-left: 4px solid rgba(, , , );
border-right: 4px solid rgb(, , );
border-top: 4px solid #ff0;
border-bottom: 4px solid #ca0309;
}

效果:

把10px改成0后:

去掉border-top这一句:

把border-left和border-right弄透明:

修改后的代码:

.triangle {
width: ;
height: ;
overflow: hidden;
border-left: 4px solid rgba(, , , );
border-right: 4px solid rgba(, , , );
border-bottom: 4px solid #ca0309;
}

css 制作三角形图标 不支持IE6的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  3. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  4. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

  5. css制作三角形,下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  6. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  7. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  8. CSS实现三角形图标的原理《转载》

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

  9. CSS实现三角形图标的原理!!!!今天总算弄懂了。

    网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...

随机推荐

  1. centos使用密钥替换密码登录服务器

    一.首先登陆centos,切换用户,切换到你要免密码登陆的用户,进入到家目录,以下我以admin为例,命令:su admincd ~ 二.创建钥匙,命令:ssh-keygen -t rsa,一路按Y搞 ...

  2. 有趣的Java之调皮的浮点数

    **当你在写一个电商网站的时候,你可能会给你的商品标价1.99,10.9这样的价格来吸引顾客.我应该用浮点数float/double来储存它们,当我的顾客购买商品的时候,从他们的账户里扣费,使用整型是 ...

  3. 云计算之路-试用Azure:每一次删除都让人如此“心惊”

    这篇博文吐槽的是Azure(Virtual Machine)的虚拟机删除功能. 在阿里云中,没有提供直接的虚拟机删除操作,如果不用某台虚拟机,“停止”即可,过期一段时间后会自动释放(这里的释放相当于删 ...

  4. Intent传递对象的方法

    //传递对象 Bundle bundle = new Bundle(); intent = new Intent(getApplicationContext(), YourActivity.class ...

  5. docker学习笔记-1

    docker学习笔记一:安装 mac安装docker docker官方文档上有这么一段话: Because the Docker daemon uses Linux-specific kernel f ...

  6. java提高篇-----理解java的三大特性之封装

    在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...

  7. 04-hibernate注解-一对一双向外键关联

    一对一双向外键 1,主控方的配置同一对一单向外键关联. 2,@OneToOne(mappedBy="card") //被控方 @OneToOne(mappedBy="ca ...

  8. shell中$0,$?,$!等的特殊使用方法

    变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后执行的后台Process的PID $? 最后执行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 ...

  9. GDI+学习笔记(九)带插件的排序算法演示器(MFC中的GDI+实例)

    带插件的排序算法演示器 请尊重本人的工作成果,转载请留言.并说明转载地址,谢谢. 地址例如以下: http://blog.csdn.net/fukainankai/article/details/27 ...

  10. Sphinx-实战

    配置完成后, 有了数据源.索引文件存储位置等, 便可以使用 indexer 工具创建索引, 收集要被检索的数据 -c 指定配置文件 默认使用 etc/sphinx.conf --all 对所有索引重新 ...