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的用来实 ...
随机推荐
- Android之通知使用权
通知使用权打开方式 设置--提示音和通知--通知使用权. 具体界面如图: 存在须要拥有通知使用权应用时: 不存在须要拥有通知使用权应用时: 用户为应用勾选复选框后系统弹dialog须要用户进一步确认时 ...
- Android面试题(1)
1. 下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存 B. 内存回收程序负责释放无用内存 C. 内存回收程序允许程序员直接释放内存 D. 内存回收程序可以在 ...
- EffectiveJava(26)使用泛型类替代普通类
使用泛型编写类比使用需要在客户端代码中进行转换的类型更加安全,并且对去其他程序员来说更加容易扩展,我们应该将可以用泛型代替的非泛型类优化 那么,如何将类泛型化呢? 这很简单.首先,给他的声明添加一个或 ...
- 元素的数据存储-jQuery.data()与.data()
jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 . ...
- Windows编译OpenSSL
安装说明參考openssl源代码目录下INSTALL.W32 step1 环境搭建 安装perl,Visual Studio 2008 下载Openssl最新版源代码.我下的版本号为OpenSSL-1 ...
- Cocos2d-x设置吞没单击属性来避免精灵重叠被点击后的事件续传
代码如下: Size visibleSize = Director::getInstance()->getVisibleSize(); /* create two sprites which h ...
- DataBase 之 拉链表结构设计
一.概念 拉链表是针对数据仓库设计中表存储数据的方式而定义的,顾名思义,所谓拉链,就是记录历史.记录一个事物从开始,一直到当前状态的所有变化的信息. 在历史表中对客户的一生的记录可能就这样几条记录,避 ...
- mac git xcrun error active developer path 错误
一:情景: 在mac下使用git;xcode4.6的环境时,需要安装command line tools ,但是在装了xcode5之后,就不需要安装command line tools了,默认已经集成 ...
- Unity 逻辑层通知UI 通过接口消除他们通信的switch判断
需求如何: 用户名字长度为2-12之间, 如果错误在界面上弹出一个消息框 写烂一点 public void PostRename(string name) { if (string.IsNullO ...
- One simple WPF & C# RayTracer
What's this 这是一个软渲染光线追踪器,基于c#和wpf技术. How to use 这份代码的唯一参考书是Ray Tracing From The Ground Up,在学习和阅读本书过程 ...