CSS三角形干净代码编写方法（兼容IE6）

<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. 而如果上面没有块元素，则从嵌入元素的内容开始计算，所以上面的框架被放置在浏览器可见区域的顶部。

解决方案

您可以通过多种方式做到这一点：

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写的*/
}
复制代码

改变边框的宽度，三角形就会变大而不变形。非常明亮。

==三角形完成了。 ==

延伸

直角三角形

以上三角形都是45度三角形。三角形的角度由边框的高度和宽度决定。

比如像这样的三角形，只需确保上下宽度和左右宽度不同即可。

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的小圆角矩形

基本原理是上下有伪元素的矩形。

之前是向上的梯形，之后是向下的梯形。

注意不要让它太宽，否则它将是一个相切的矩形，这样你就可以避免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，也可以使用变换旋转属性：

作者：a1burning
来源：掘金