css 制作三角形图标 不支持IE6

.triangle {
width: 10px;
height: 10px;
overflow: hidden;
border-left: 4px solid rgba(0, 224, 255, 1);
border-right: 4px solid rgb(0, 255, 10);
border-top: 4px solid #ff0;
border-bottom: 4px solid #ca0309;
}

效果:

把10px改成0后:

去掉border-top这一句:

把border-left和border-right弄透明:

修改后的代码:

.triangle {
width: 0;
height: 0;
overflow: hidden;
border-left: 4px solid rgba(0, 224, 255, 0);
border-right: 4px solid rgba(0, 255, 10, 0);
border-bottom: 4px solid #ca0309;
}

css 制作三角形图标 不支持IE6

时间: 2024-12-29 23:04:44

css 制作三角形图标 不支持IE6的相关文章

css制作三角形,下拉框三角形

网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0px; border-top:20px solid transparent; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid green; } <div>

CSS制作三角形和按钮

CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形 当鼠标经过时,三角形会垂直翻转,如下 现在我分享制作三角形的做法,主要是利用边框做成的 首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形 源代码: <!DOCTYPE html> <html lang="en"> <

利用div和css制作三角形效果

利用div和css制作三角形效果:本章节介绍一下如何利用div和css实现三角形效果,虽然看起来表神奇,但是原理是非常的简单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁

css制作三角形

css制作三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } #triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-ri

CSS实现三角形图标原理解析

CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框样式使用border-top 设置上边框,一般单独设置上边框样式使用border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用基本用法: // 为引用 class="border-four" 的盒子对象设置1px像素红色实线边框.bord

CSS 制作三角形 以及 display 、 visibblity属性含义

纯css 制作三角形 .box1{ width:0; height:0; top:-10px; left:15px; position:absolute; border-style:solid; border-width: 0 10px 10px; border-color: transparent transparent #0CF; } 1.display:visibility 的应用对象无论值为何,浏览器都会加载生产此对象的dom结构. 2.visibility:hidden 的应用对象只保

用css制作三角形

用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假设一下,如果把宽和高设置成0px,同时让边框的宽度更宽一点情况会怎样那?css代码如下: .tip1{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:#f60 #f00 #0f0 #00f; ov

经典CSS实现三角形图标原理解析

前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解: border边框语法: border 四条边框设置 border-left 设置左边框,一般单独设置左边框样式使用 border-right 设置右边框,一般单独设置右边框样式使用 border-top 设置上边框,一般单独设置上边框样式使用 border-bottom 设置下边框,一般单独设置

纯css做三角形图标

以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px solid #000; width: 0; } 只要这么简单的三行css就可以实现一个三角形!