.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. pymongo常见的高级用法

    pymongo是python中基于mongodb数据库开发出来的,比mongoengine要高级一些,也要好用一些. 基本的增删查改就不说了 insert() delete() find() upda ...

  2. IntelliJ IDEA 创建 java Maven项目

    1.下载安装Maven 下载官网:http://maven.apache.org/download.cgi 下载解压到当前目录并建立LocalWarehouse文件夹,该文件夹为自己的文件仓库做存储. ...

  3. Linux远程执行Windows机器任务

    Linux远程执行Windows机器任务     近期测试人员提出需求需要在Linux下调用Windows系统下的cmd的命令完成自动构建和测试并生成测试报告. 环境: Windows Server2 ...

  4. 批量修改mp3文件的title等

    批量修改mp3文件的title等 不是改文件名哦: 下载地址:https://mp3tag.en.softonic.com/ 帮助文档:file:///C:/Program%20Files%20(x8 ...

  5. Microsoft Visual C++ Redistributable Package下载

    温馨提示: 1.目前,很多程序软件正常运行需要VC++库的支持,因此,博主在此做了一个合集,方便大家下载: 2.有需要的朋友请根据自己需要下载,博主所提供的下载地址均是微软官网的,请放心下载: 3.如 ...

  6. jquery中动画特效方法

    基本特效 方法:                  说明 .show()              显示选中的元素 .hide()                隐藏选中的元素 .toggle()   ...

  7. 在k8s上部署第一个php应用

    一.搭建nginx+php 1.站点配置文件 1.1创建nginx-configmap.yaml [root@master k8s]# cat nginx-configmap.yaml apiVers ...

  8. git 关联远程分支

    问题解析: git本地新建一个分支后,必须要做远程分支关联.如果没有关联, git 会在下面的操作中提示你显示的添加关联.关联目的是如果在本地分支下操作: git pull, git push ,不需 ...

  9. ionicframework(一)

    官方网站    http://ionicframework.com 然后在Get Start里面可以了解到,安装Ionic需要安装 Node.js. 文件来源 http://www.tuicool.c ...

  10. nodejs入门篇---创建project并具体解释

    想了非常久.总想写点对大家有优点的,今天解说生成项目. 如今市面上一般须要人全栈-----mean(mongo,express.angular,nodejs),这样能够从前端开发到后端以及数据库,听起 ...