.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. unity statics window fps原理

    https://forum.unity.com/threads/is-unity-fps-count-wrong-or-am-i-missing-something.150139/ 看了下这个fps ...

  2. Chrome/FireFox处理JSON的插件

    Chrome/FireFox处理JSON的插件 JSON插件   效果对比 对于json的数据如果不编排一下格式查看起来很费劲,今天推荐一款chrome/Firfox下处理json的插件JSON-ha ...

  3. Eclipse代码布局怎么使用退格和缩进快捷键?

    Eclipse代码布局怎么使用退格和缩进快捷键? 好的程序,不仅要运行快速准确,而且还要易于理解.研究表明,清晰的代码布局可以提高程序猿的理解能力.何为代码布局?其实就是代码的缩进.留白等.为了保证清 ...

  4. Linux115条常用命令

    1,echo “aa” > test.txt 和 echo “bb” >> test.txt //>将原文件清空,并且内容写入到文件中,>>将内容放到文件的尾部2, ...

  5. SqlBulkCopy-从 bcp 客户端收到一个对 colid 1 无效的列长度

    经过研究,问题是因为tatatable中的colid列1的数据字段长度超过了数据表中定义的字段长度. 解决方法就是将数据库该字段的长度增大问题就解决了.

  6. STL经常使用遍历算法for_each和transform的比較

    for_each()和transform()算法比較 1)STL 算法 – 改动性算法  for_each()  copy()  copy_backward()  transform()  merge ...

  7. mysql结构相同的三张表查询一条记录\将一张表中的数据插入另外一张表

    将一张表中的数据插入另外一张表 1.两张表结构相同 insert into 表1名称 select * from 表2名称 2.两张结构不相同的表 insert into 表1名称(列名1,列名2,列 ...

  8. python&amp;php数据抓取、爬虫分析与中介,有网址案例

    近期在做一个网络爬虫程序.后台使用python不定时去抓取数据.前台使用php进行展示 站点是:http://se.dianfenxiang.com

  9. 关于同一线程两次调用EnterCriticalSection的测试

    #include "stdafx.h" #include <iostream> using namespace std; #include <windows.h& ...

  10. 【转贴】J2EE中的13种技术规范

    J2EE平台由一整套服务(Services).应用程序接口(APIs)和协议构成,它对开发基于Web的多层应用提供了功能支持,下面对J2EE中的13种技术规范进行简单的描述(限于篇幅,这里只能进行简单 ...