CSS三角形/气泡的实现原理及应用

记得第一次面试，面试官问如何用css实现一个不规则三角形？好叭 ·-·，这点忽略看了，手动叹气(╥﹏╥)，好在别的回答的还好，没凉

原理：css盒模型

标准盒模型包括: content（内容宽度width）+margin（边界）+border（边框）+padding（填充）

– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.

– 调整宽度大小可以调节三角形形状.

1

通常, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图：

html:通用，下面省略。。。<div id=test1></div>

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

2

通常, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图：

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

3

只保留最上面的颜色呢～

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent（透明） transparent transparent;
    border-style:solid;
    border-width:20px;
}

注：IE不支持透明transparent，会出现如下图情况，

解决办法：IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果～～

（IE 6）#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

4

当小三角形的斜边处在盒子对角线上时，如下图：

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}
注：更改其border-width可改变三角形形状

扩展：用css实现气泡

代码：（一个三角形和一个矩形合体，控制好覆盖区域，还有很多奇思妙想可以实现，先写一个咯～）

html：

<div class="test">

<span class="bot"></span>

<span class="top"></span>

CSS “边框法”实现气泡对话框效果一

</div>

 

css:

.test{width:300px; padding:30px 20px; margin-left:60px; background:#009933;border-radius: 10px; position:relative;}

.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.test span.bot{border-width:20px;border-style:solid;border-color:#ffffff #009933 #009933 #ffffff;left:-40px;top:40px;}

.test span.top{border-width:10px 20px;border-style:dashed solid solid dashed;border-color:transparent #ffffff #ffffff transparent;left:-40px;top:60px;}