.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. django queryset合并问题

    今天在实现搜索时遇到一个问题,如何同时搜索model里面的title以及content和category字典 contents = Blog.objects.filter(content__conta ...

  2. cpu gpu数据同步

    https://developer.apple.com/documentation/metal/advanced_command_setup/cpu_and_gpu_synchronization d ...

  3. Mapreduce报错:java.lang.ClassNotFoundException: Class Mapper not found

    mapreduce找不到mapper类 解决方法: 开始自己用的是mapreduce自己打包的一种方法: job.setJarByClass(StandardJob.class); 但这样一直在报错: ...

  4. PHP Variable Scope

    原文: https://phppot.com/php/variable-scope-in-php/ Last modified on March 24th, 2017 by Vincy. ------ ...

  5. JSP中的TAG文件和TLD文件小结

    在jsp文件中,可以引用tag和tld文件. 1.对于tag文件 <%@ taglib prefix="ui" tagdir="/WEB-INF/tags" ...

  6. mysql时间字段转换为毫秒格式

    下面是转载的关于MySQL毫秒.微秒精度时间处理的两段篇章,留给自己和供大家参考~~ 一.MySQL 获得毫秒.微秒及对毫秒.微秒的处理 MySQL 较新的版本中(MySQL 6.0.5),也还没有产 ...

  7. 一条长为L的绳子,一面靠墙,另外三边组成矩形,问此矩形最大面积能是多少?

    靠墙的两边设为x,墙的对边设为y,有2x+y=L; 则y=L-2x, 矩形面积函数为xy=x(L-2x)=-2x2+xL,即f(x)=-2x2+xL 这时就是求二次函数的极值问题了. 按二次函数y=a ...

  8. java中Runtime类

    一.概述      Runtime类封装了运行时的环境.每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接.      一般不能实例化一个Runtime对象, ...

  9. TP框架中模板赋值

    TP框架中模板赋值 $this->assign('name',$value); $this->name = $value; // 两种写法是等效的

  10. Linux 修改终端显示bash-1.4$

    先取得root权限,然后在终端如下操作[root@host]$su -然后输入密码接着[root@host]#PS1='[\u@\H \W]\$' 你取得root权限后在,在终端命令下输入这个,一定要 ...