去制作三角，当然我们经常会使用或者伪元素去做一些小图标。那么在显示上面，可能会有问题。

下面的代码：

em{

width: 0;

height: 0;

border-width: 50px;

border-color: transparent transparent transparent #f40;

border-style: solid;

}

可以看到页面是这个样子的:

为什么是这个样子的，那么我们再看的仔细一点。

它实际是这个样子的。

造成这样的原因

是因为行内元素自己有固定的高度，不能设置宽高为0，所以上面下面都是50px没有问题，但是中间撑开了距离，也就有了梯形的效果。

而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的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;

}

箭头

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

.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;

}

对话框

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

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;

}

兼容IE8的小圆角矩形

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

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

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

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;

}

利用css3旋转来制作三角形

如果可以用到css3，也可以使用到transform的rotate属性

大概原理图就是：

将里面的旋转45度，外面的overflow:hidden即可

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);

}

最终效果图是：

@version1.0——2018-11-8——创建《CSS三角的写法(兼容IE6)》

©burning_韵七七