你的位置:首页 > 网页设计

[网页设计]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防止被屏蔽,上面已插入了源代码)

从上面的效果可以看到,四个三角形拼成了一个正方形,我们只要把其中一个想要的三角形保留下来,其他的设置为透明的,就可以达到想要的效果了;

如border-color:red transparent transparent transparent;就能看到一个红色三角形

效果:

但是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>

效果:

注意:此方法在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>

效果:

.triangle2的top值不能直接是10px,不然显示的三角形边框会小于10,会导致气泡部分小于容器div元素的边框(border-width);top值的计算:(border-width)*(border-width)/((border-width)*sin45)