css创建三角形原理 css直角三角形怎么写 _生活百科

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

简介
三角的做法有好几种：

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

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

代码写的三角，不管大小是多少，是不失真的。
代码运行比图片更快。
如果项目中没有引用字体图标，代码写是比较可靠的。

原理
原理就是使用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;}

查了查网上的，如果是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);}

如果是解决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>可以看到页面是这个样子的:

文章插图
为什么是这个样子的，那么我们再看的仔细一点。它实际是这个样子的。

文章插图
造成这样的原因

是因为行内元素自己有固定的高度，不能设置宽高为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;}箭头

文章插图
其实原理也简单，就是两个三角重叠在一起。上面的三角就是背景的颜色
<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><div class="san"> <div class="si"></div></div>对话框

文章插图
这个使用伪元素去做就很方便。
【css创建三角形原理 css直角三角形怎么写】<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>

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：