[转]CSS实现三角形的方法

1：border分割线解析

 　　　　　　　　　　　　　　　　　　　　

  width:40px;
  height:40px;
　background:#000;
  border-width:30px;
  border-style:solid;
  border-color:#e66161 #f3bb5b #94e24f #85bfda;

 

 参照以上代码，按照个人理解，盒模型应该是这样

 

可是实际上图片是这样的

 

4个边框是上图4种不一样颜色的方框，固然这是我理解的应该是这样，可是事实上不是想象中的那样

为何呢？这个缘由我也纠结了很久

 

看下上图盒模型，问个问题，按照我理解的盒模型所示的4种边框如何显示？尤为是红色箭头两个border重叠处，难道显示2种重叠颜色？那是什么颜色了？这也太扯了吧，因此这也就是问题缘由所在

缘由就是“浏览器自动把boder重叠处平分为两半“

 

因此才会出现上图那样，在两种不一样颜色的border交界处有一条很明显的分割线（第一张图中的白色箭头）

也就是在盒模型中两个border重叠（红色箭头）区域进行平分

 

固然明白了以上原理，用css画三角形就很快就能上手了

 

2.当第一个图形高度为0的状况会发生什么事情呢？

代码以下

 

 background:#000;
 border-width:30px;
 border-style:solid;
 border-color:#e66161 #f3bb5b #94e24f #85bfda; 

 

固然你们会想了，高度为0，图形如何呈现出来呢？高度为0，可是有border，因此，看到以下图形

你会发现没有高度以后固然background也不会显示了，只会把它自己的border显示出来，并且“浏览器自动把boder重叠处平分为两半“，因此就成了上图那样

看到这里，相信应该明白如何作三角形了

3. transparent

transparent，被用来做为颜色的一个参数值，用于表示背景透明，也就是背景色

因此，当咱们把代码改为以下

border-width:30px;
border-style:solid;
border-color:#f3bb5b transparent transparent transparent;　

你会发现成了下面的图形，固然我们的背景色是白色

他这种图形是吧右，下，左的边框都改为了透明色，因此会呈现为下三角

若是你要说我要作个有三角，这个在切换轮播图的时候做为按钮比较常见，那咱们都知道一个上右下左的原则，你选择哪个方向做为透明色，那他就成了反方向的三角形，如上图

再举个例子，左三角的话，右边框有颜色，其他背景色就能够了，仔细考虑下是否是这样？像下面这些

ps：IE6下把边框设置成 transparent 时会出现黑影，并不会透明，把 border-style 设置成 dashed 能够解决。

 

4.拓展1：实现好看的tip框，以下图所示

 

我的掌握的有3种方法 div嵌套、transform选择、特殊符号◆.这三种方法

　　　　方法1：div嵌套

　　　　

/*HTML*/
<div class="parent1">       /*这里要注意2个div的嵌套顺序*/
　　<div class="div2"></div>
　　<div class="div1"></div>
</div>

/*css Document*/
.parent1{
　　　　　position: relative;
　　　　　width: 150px;
　　　　　height: 70px;
　　　　　background:#dddddd;
　　　　　border:1px solid #f07848;
　　　　　border-radius: 10px;
}
.div1{
　　　　position:absolute;
　　　　bottom:-10px;
　　　　border-style:solid;
　　　　border-width:15px;
　　　　border-color:#dddddd transparent transparent transparent;
}
.div2{
　　　　position:absolute;
　　　　bottom:-11px;
　　　　border-style:solid;
　　　　border-width:15px;
　　　　border-color:#f07848 transparent transparent transparent;
}

在这个div嵌套里面要注意2个div的嵌套顺序和2个div间隔1个像素来显示，当你作出来时你放大会感受有点瑕疵，固然用户通常不会追究这些的

　　　　

 

 

　　　　方法2.transform实现

/*HTML*/
<div class="parent2">
　　<div class="div3"></div>
</div>

/*css Document*/
.parent2{
　　　　position:relative;
　　　　width:150px;
　　　　height:70px;
　　　　background:#dddddd;
　　　　border:1px solid #f07848
　　　　border-radius:10px;
}
}
.div3{
　　　　position:absolute;
　　　　top:563px;
　　　　left:805px;
　　　　width:20px;
　　　　height:20px;
　　　　background:#dddddd;
　　　　border-width: 15px;
　　　　border-left:1px solid #f07848;
　　　　border-bottom: 1px solid #f07848;
　　　　transform:rotate(-45deg);
}

 固然这里兼容性没写，也不是太好

 

　　　　3.特殊字符实现:和第一中方法相似，建立2个含有特殊字符的div框嵌套在一块儿，修改文字颜色和div的边框实现,固然你会看到firebug上篮框那么高，那是字体高度

/*HTML*/
<div class="parent3">
　　<div class="div4">◆</div>
　<div class="div5">◆</div>

</div>

/*css Document*/
.parent3{
　　　　　　position:releative;
　　　　　　width: 150px;
　　　　　　height: 70px;
　　　　　　border:1px solid #f07848;
　　　　　　background:#dddddd;
　　　　　　border-radius: 10px;
}
.div4{
　　　　position: absolute;
　　　　left:70px;
　　　　bottom:-15px;
　　　　font-size:30px;
　　　　color:#f07848;
}
.div5{
　　　　position: absolute;
　　　　left:70px;
　　　　bottom:-16px;
　　　　font-size:30px;
　　　　color:#dddddd;
}

 

2014-12-4 09:53:08

再补充一个经过:before伪元素实现三角

老样子，先贴代码

 

div:before{
　　　　　　position:absolute;
　　　　　　border-color:transparent;
　　　　　　border-right-color:#000;
　　　　　　border-width:15px;
　　　　　　border-style:solid;
　　　　　　display:block;
　　　　　　content:" ";
　　　　　　top:20px;
　　　　　　left:-30px;
　　　　　　width:0;
　　　　　　height:0;
} div:after{
　　　　　　position:absolute;
　　　　　　border-color:transparent;
　　　　　　border-right-color:#fff;
　　　　　　border-width:15px;
　　　　　　border-style:solid;
　　　　　　display:block;
　　　　　　content:" ";
　　　　　　top:20px;
　　　　　　left:-30px;
　　　　　　width:0;
　　　　　　height:0;
}

 这里的要点是2个伪元素须要相差一两个像素的距离，一个是背景色的伪元素盖住了有颜色（边框颜色）的伪元素，层叠显示的，这种感受是最简单的方式，固然有更好的，目前我没有找到

更新：

新方法实现一个旋转45度的高宽为0，只有border的正方形，这种方法目前是除了切图外是最好的

 1  　　em{  2  position:absolute;  3 /*这里写成你想要的位置*/  4  left:73px;  5  top:11px;  6 /*这里写成你想要的背景色*/  7  background:#ffffff;  8 /*这里写成你想要的哪一边边框颜色*/  9  border-top:1px solid #CAC1C1; 10  border-left:1px solid #CAC1C1; 11 /*这里写成你想要的大小*/ 12  width:10px; 13  height:10px; 14 /*旋转45度兼容*/ 15  transform: rotate(45deg); 16  -o-transform: rotate(45deg); 17  -webkit-transform: rotate(45deg); 18  -moz-transform: rotate(45deg); 19  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779); 20 }