纯css实现三角原理，兼容IE

css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。

如果4种颜色只保留一种颜色，余下3种颜色设置为透明（或者设置为和背景色相同的颜色），就出现一个小三角了。

只保留上面的颜色，如下图：

    display: inline-block;width: 0;height: 0;border-top: 20px solid #639;border-right: 20px solid transparent;border-left: 20px solid transparent;border-bottom:0px solid transparent;

IE6不兼容transparent, 左右border由 solid改为dashed.

    display: inline-block;width: 0;height: 0;border-top: 20px solid #639;border-right: 20px dashed transparent;border-left: 20px dashed transparent;border-bottom:0px solid transparent;

Bootstrap中三角也是使用css实现。

html代码：

<span class="caret"></span>

css代码：

.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px dashed #333;border-right: 4px solid transparent;border-left: 4px solid transparent;
}

但是在IE8下显示为空白，dashed改为solid。

如果4种颜色只保留一种颜色，余下3种颜色设置为透明（或者设置为和背景色相同的颜色），就出现一个小三角了。

示例3：
只保留上面的红色，如下图：

纯css实现三角原理，兼容IE相关推荐

html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
html三角形下拉列表,CSS—纯CSS实现三角图形（常用于带指引效果的小三角，下拉列表的小三角等）...
常用情况,如下图图片.png 图片.png CSS代码 .we-chat-info::after{ position: absolute; top: 109px; right: -8px; cont ...
纯css页面变灰度兼容ie、firefox、chrome、opera、safari
html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); - ...
纯css实现文本溢出省略号，兼容（火狐，IE9，chrome）
很多业务需求下会出现文本溢出无法显示的情况,设置为显示省略号又不兼容,兼容性只能用js实现,今天介绍一种可以直接用css实现的方法.该方法兼容各大主流浏览器,除了诡异的IE低版本实现原理:盒模型浮动 ...
图片轮播html实现原理,纯CSS实现图片轮播
原文:http://www.aichengxu.com/view/4182590 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好总共花费的 ani ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

纯css实现三角原理，兼容IE

纯css实现三角原理，兼容IE相关推荐

最新文章

热门文章