CSS三角的写法（兼容IE6）

目录

• 简介
• 优势
• 原理
  • 1. 先建立一个div
  • 2. 而后给div设定边框。
  • 3. 给div的四个边框都设置不一样的颜色
  • 4. 把宽度和高度都变成0
  • 5. 其他角为透明
  • 6. 兼容IE6浏览器
    • 形成这样的缘由是：
    • 最简单的解决办法：(后面添加)
    • 其余的解决办法：
  • 7. 解决内联元素的三角显示问题
    • 为何会有这个问题
    • 解决办法
      • 1. 去掉固定的内容高度
      • 2. 将内联元素转化为块级元素或者行内块元素
      • 3. 将元素脱标（若是涉及特殊的布局能够直接使用）
• 最终代码
• 扩展
  • 有角度的三角
  • 有一个角是直角的三角
  • 箭头
  • 对话框
  • 兼容IE8的小圆角矩形
  • 利用css3旋转来制做三角形

简介

三角的作法有好几种：

• 图片、精灵图（网易）
• 字体图标（京东）
• 纯代码写（亚马逊）

这里主要介绍的纯代码写的。

优势

1. 代码写的三角，无论大小是多少，是不失真的。
2. 代码运行比图片更快。
3. 若是项目中没有引用字体图标，代码写是比较可靠的。

原理

原理就是使用css的盒模型中的border属性
使用border属性就能够实现一个兼容性很好的三角图形效果，其底层受到border-style的inseet/outset影响，边框3D效果在互联网早期仍是很流行的，。

1. 先建立一个div

<div></div>
复制代码

2. 而后给div设定边框。

div{
    width:200px;
    height:100px;
    border:10px solid red; 
}
复制代码

能够看到效果：

3. 给div的四个边框都设置不一样的颜色

div{
    width:200px;
    height:100px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}
复制代码

能够看到如下效果：

能够看到两个border交叉的地方，有斜边存在。

4. 把宽度和高度都变成0

div{
    width:0px;
    height:0px;
    border-left:10px solid red;
    border-top:10px solid green; 
    border-right:10px solid blue; 
    border-bottom:10px solid yellow; 
}

/*也能够这么写*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:red green blue yellow;
}
复制代码

能够看到如下效果：

这个时候就看得很明显了，出现了四个三角。那若是要出现一个，那么就将其余的三个弄成透明色就能够了。

这个就是三角形的由来。

5. 其他角为透明

这里的设置也遵循 上右下左 的顺序，把不须要的角弄成透明色。

div{
    width:0px; 
    height:0px;
    border-width:10px;   
    border-color:#f00 transparent transparent transparent;
    border-style:solid;
}

/*也能够再进行合并*/
div{
    width:0px; 
    height:0px;
    border:10px solid;   
    border-color:#f00 transparent transparent transparent;
}
复制代码

这样一个三角就完成了。 那么问题来了，那就是兼容问题，IE6的兼容问题，若是不要求兼容IE6能够忽略下一步。

6. 兼容IE6浏览器

一样的一个三角，在IE6的显示是什么呢？

形成这样的缘由是：

• IE6不支持border的transparent
• IE6的高度最小为19px，不支持高度为0

在IE6下面，若是想把元素例如div设置成19像素如下的高度就设置不了了。这是由于IE6浏览器里面有个默认的高度，IE6下这个问题是由于默认的行高形成的。

最简单的解决办法：(后面添加)

div{
    /*不支持transparent*/
    border-style:solid dashed dashed dashed;
    /*高度最小不为0*/
    overflow:hidden;
}
复制代码

其余的解决办法：

1. 查了查网上的，若是是IE6不支持transparent, 能够这么作：

div{
    border:solid 1px transparent; 
    _border-color:tomato; 
    _filter:chroma(color=tomato); 
}
复制代码

因此我以为用在这里也能够，BUT没有亲测过，若是哪位小可爱测过能够请告知我^ ^。

div{
    width:0px;
    height:0px;
    margin:100px auto;
    border-width:10px;
    border-style:solid;
    border-color:#f00 transparent transparent transparent;
    _border-color:#f00 tomato tomato tomato; 
    _filter:chroma(color=tomato);
}
复制代码

2. 若是是解决IE6的高度问题(也能够前面加下划线，表示兼容的IE6)

div{
    height:0;
    font-size:0;
    line-height:0;
    overflow:hidden;
}
复制代码

7. 解决内联元素的三角显示问题

为何会有这个问题

由于咱们刚才用<div>去制做三角，固然咱们常常会使用<em><i>或者伪元素去作一些小图标。那么在显示上面，可能会有问题。 下面的代码：

<style> em{ width: 0; height: 0; border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; } </style>

<em></em>
复制代码

能够看到页面是这个样子的:

为何是这个样子的，那么咱们再看的仔细一点。 它实际是这个样子的。

形成这样的缘由

1. 是由于行内元素本身有固定的高度，不能设置宽高为0，因此上面下面都是50px没有问题，可是中间撑开了距离，也就有了梯形的效果。
2. 并且若是上面没有块元素的时候，是从内联元素的内容开始算起的，因此上面的border就会到浏览器可视区域的上面。

解决办法

这个有不少的办法：

1. 去掉固定的内容高度

使用font-size:0;能够去掉内容的固定高度。

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	font-size: 0;
}
复制代码

2. 将内联元素转化为块级元素或者行内块元素

em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	display: block;   /*也能够是inline-block*/
}
复制代码

3. 将元素脱标（若是涉及特殊的布局能够直接使用）

/*脱标*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	position: absolute;
	top:0;
	left:0;
}

/*or 浮动*/
em{
	border-width: 50px;
	border-color: transparent transparent transparent #f40;
	border-style: solid;
	float:left;
}

复制代码

最终代码

下面就是兼容了IE6版本的三角代码。

div{
    width:0px; /*设置宽高为0*/
    height:0px;/*可不写*/
    border-width:10px;   /*数值控制三角的大小，垂直的位置*/
    border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
    border-style:solid dashed dashed dashed;/*设置边框样式，dashed是兼容IE6写的*/
    overflow:hidden;/*兼容IE6最小高度不为0写的*/
}
复制代码

改变border-width,三角变大，是不失真的。很清晰。

==三角制做完成。==

扩展

有角度的三角

上面制做的都是45度的三角，三角能够经过border的高度宽度肯定角度。

好比这样一个三角，只须要肯定上下的和左右的宽度不同便可。

div{
	width: 0px;
	height: 0px;
	margin: 100px auto;
	border-width:10px 30px;
	border-color:transparent transparent transparent red;
	border-style:solid;
}
复制代码

有一个角是直角的三角

观察能够看到，是上面和右面的三角同时设置成一个颜色。就会出现直角的三角。

div{
	width: 0;
	border-width: 20px 10px;
	border-style: solid;
	border-color: red red transparent transparent;
}
复制代码

箭头

其实原理也简单，就是两个三角重叠在一块儿。上面的三角就是背景的颜色

<style type="text/css"> .san { border-width: 50px; border-color: transparent transparent transparent #f40; border-style: solid; position: relative; } .si { border-width: 30px; border-color: transparent transparent transparent #fff; border-style: solid; position: absolute; left: -50px; top: -30px; } </style>

<!--html结构-->
<div class="san">
	<div class="si"></div>
</div>
复制代码

对话框

这个使用伪元素去作就很方便。

<style type="text/css"> div{ width: 150px; padding: 10px; line-height: 20px; color: #9c623f; background-color: rgba(255, 236, 193, 0.72); border-radius: 10px; position: relative; } div::before{ content:""; border-width: 10px; border-color:transparent rgba(255, 236, 193, 0.72) transparent transparent; border-style: solid; position: absolute; left: -20px; top: 10px; } </style>

<div class="select-toast">早安，哈哈！今每天气不错，很好！</div>
复制代码

兼容IE8的小圆角矩形

原理就是一个矩形，上面和下面使用伪元素设置。

before是方向朝上的梯形，after是方向朝下的梯形。

注意不要太宽了，不然会变成切边矩形，这样就能够避免border-radius的兼容问题

<style type="text/css"> div{ width: 140px; height: 40px; background-color: rgb(244,121,128); position: relative; } div:before, div:after { content: ""; position: absolute; left: 0; right: 0; border-style: solid; } div:before { top: -3px; border-width: 0 3px 3px; border-color: transparent transparent red; } div:after { bottom: -3px; border-width: 3px 3px 0; border-color: red transparent transparent; } </style>

<div></div>
复制代码

利用css3旋转来制做三角形

若是能够用到css3，也可使用到transform的rotate属性

大概原理图就是： 将里面的旋转45度，外面的overflow:hidden便可

<style type="text/css"> i,s{ text-decoration: none; font-style: normal; display: block; width: 20px; height: 20px; } i{ position: relative; overflow: hidden; } s{ position: absolute; top:-14px; background: yellowgreen; -webkit-transform: rotate(45deg); transform: rotate(45deg); } </style>

<!--html结构-->
<i>
	<s></s>
</i>
复制代码

最终效果图是：

@version1.0——2018-11-8——建立《CSS三角的写法（兼容IE6）》

©burning_韵七七