css 制作三角形图标 不支持IE6
.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的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- css制作三角形,下拉框三角形
网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
- 纯CSS制作网页图标
三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS实现三角形图标的原理《转载》
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- CSS实现三角形图标的原理!!!!今天总算弄懂了。
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
随机推荐
- FPGA作为从机与STM32进行SPI协议通信---Verilog实现
一.SPI协议简要介绍 SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用 ...
- Short与Integer互转
int 是4字节, short 是2字节的, 如果将int(Integer)转成short(Short), 那么必须强制转换,否则会报编译异常. 但是, 当int(Integer)是一个final时, ...
- PHP和数据访问之(插入。删除。和更新数据)
插入: <?php $conn=@new mysqli('localhost','root','123','mytestdb'); $q_str=<<<EOM insert i ...
- Android 蓝牙开发之A2DP基本功能
本文主要是Android做为Audio Source端,A2DP的基本操作:包括连接.断开连接.设置优先级.获取优先级.获取A2DP连接状态.获取A2DP连接的设备列表等功能. 1.简介 Audio ...
- 微信小程序 (node) warning: possible EventEmitter memory leak detected
小程序 (node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setM ...
- TP框架中模板赋值
TP框架中模板赋值 $this->assign('name',$value); $this->name = $value; // 两种写法是等效的
- odoo8登录时,同帐号在其它客户端的连接自动退出
odoo跟大多数B/S系统一样,同一个帐号可以在不同的电脑上登录,并且可以同时操作,这样子会带来一些权限上的漏洞.为了解决这个问题,经过分析odoo的session处理机制,开发了一个模块,安装此模块 ...
- 进程上下文切换 – 残酷的性能杀手(上)(转载cppthinker.com)
对于服务器的优化,很多人都有自己的经验和见解,但就我观察,有两点常常会被人忽视 – 上下文切换 和 Cache Line同步 问题,人们往往都会习惯性地把视线集中在尽力减少内存拷贝,减少IO次数这样的 ...
- javascript Date日期类
四.Date日期类 迁移时间:2017年5月27日18:43:02 Author:Marydon (一)对日期进行格式化(日期转字符串) 自定义Date日期类的format()格式化方法 方式一: ...
- IBATIS+ORACLE(一)
迁移时间:2017年6月1日15:55:17 Author:Marydon (四)IBATIS + ORACLE 第一部分:基础篇 1.4.1.1 分页SQL <!-- 开头 --> ...