首页 > 代码库 > css绘制三角形原理
css绘制三角形原理
1、新建一个元素，将它的宽高都设置为0；然后通过设置border属性来实现三角形效果，下面是css绘制三角形的原理：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:100px solid #000; border-color:red green yellow blue;}p{color:red;} </style></head><body><div class="caret"></div><p> 将宽高都设置为0<br/> border-color:red green yellow blue;将变宽四个方向颜色设置成不同的颜色以便观察</p></body></html>
效果:(为了jsfiddle防止被屏蔽,上面已插入了源代码)
<iframe style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/embedded/result,css,html,js/" width="320" height="240"></iframe>
从上面的效果可以看到，四个三角形拼成了一个正方形，我们只要把其中一个想要的三角形保留下来，其他的设置为透明的，就可以达到想要的效果了；
如border-color：red transparent transparent transparent；就能看到一个红色三角形
效果：
<iframe style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/1/embedded/result,css,html,js/" width="320" height="240"></iframe>
但是ie6不支持transparent，所以没有透明效果，这就需要把border-style：solid dashed dashed dashed；实现了透明效果；
2、如果要实现直角对着45度斜线方向的三角形，可以将两个三角形拼在一起来实现；
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .caret{ height:0;/*将宽高都设置为0*/ width:0; border:100px solid #000; border-color:red green transparent transparent; border-style:solid solid dashed dashed;}p{color:red;} </style></head><body><div class="caret"></div><p> border-color:red green transparent transparent transparent; border-style:solid solid dashed dashed;</p></body></html>
效果:
<iframe style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/3/embedded/result,css,html,js/" width="320" height="240"></iframe>
注意：此方法在ie6中，会有个行高撑开了，需要把行高设置为0，line-heiht:0；
下面用css绘制三角形的原理来绘制一个三角形气泡
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>除去列表最后一个li的底边框</title> <style> body,p{margin:0;padding:0;} #container{ margin:0 auto; position:relative; width:400px; height:100px; border:10px solid #81A7FF; } #caret{ position:absolute; width:50px; height:50px; left:100px; bottom:-50px; } .triangle1,.triangle2{ display:block; height:0;/*将宽高都设置为0*/ width:0; line-height:0; border-style:solid dashed dashed dashed; } .triangle1{ border-width:50px; border-color:#81A7FF transparent transparent transparent; } .triangle2{ position: absolute; top:-14px;/*这个数据三角函数是计算出来的*/ border-width:50px; border-color:#fff transparent transparent transparent; } p{color:#81A7FF;text-align: center;line-height: 100px;} </style></head><body><div id="container"> <div id="caret"> <span class="triangle1"></span> <span class="triangle2"></span> </div> <p> css绘制三角形气泡 </p></div></body></html>
效果：
<iframe style="height: 300px; width: 100%;" src=" https://jsfiddle.net/wowq3mf0/6/embedded/result,css,html,js/" width="320" height="240"></iframe>
.triangle2的top值不能直接是10px，不然显示的三角形边框会小于10，会导致气泡部分小于容器div元素的边框（border-width）；top值的计算：（border-width）*(border-width)/(（border-width）*sin45)
css绘制三角形原理