文章插图
原理css 盒模型
文章插图
一个盒子包括：margin+border+padding+content
上下左右边框交界处出呈现平滑的斜线 。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等 。示例 1一般情况下，我们设置盒子的宽高度，及上下左右边框，会呈现如下图：
调整宽度大小可以调节三角形形状 。
文章插图
【CSS Border 使用分享】
#test2 { height: 0; width: 0; overflow: hidden; /* 这里设置overflow，font-size，line-height */ font-size: 0; /*是因为，虽然宽高度为0，但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高，导致盒子呈现被撑开的长矩形 */ border-color: #FF9600 #3366ff # 12 ad2a# f0eb7a; border-style: solid; border-width: 20 px;}示例 2在上面基础上，我们把宽高度都设为 0 时，会呈现上述的边界斜线 。
文章插图
#test2 { height: 0; width: 0; overflow: hidden; /* 这里设置overflow，font-size，line-height */ font-size: 0; /*是因为，虽然宽高度为 0，但在 IE 6 下会具有默认的 */ line-height: 0; /* 字体大小和行高，导致盒子呈现被撑开的长矩形 */ border-color: #FF9600 #3366ff # 12 ad2a# f0eb7a; border-style: solid; border-width: 20 px;}这时，其实我们已经看到有上下左右四个三角形了…… 如果，我们把 4 种颜色，只保留一种颜色，余下 3 种颜色设置为透明（或者设置为和背景色相同的颜色），那不就出现一个小三角了么？
示例 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 6 下不支持透明啊~，会出现下图的样子
文章插图
找到一个在 IE 6 下边框透明的文章中找到解决办法，如下例
示例 4IE 6 下，设置余下三条边的 border-style 为 dashed，即可达到透明的效果~ 具体原因可以见参考资料 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 6 下，不设置透明，将其颜色设置为背景色，使其看不出来也是可以的 。
示例 5上面我们画的小三角的斜边都是依靠原来盒子的边，还有另外一种形式的小三角，就是斜边在盒子的对角线上
文章插图
#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; }保留其中一种颜色，就可以得到斜边在对角线上的三角形了…… 多个这样的三角形，通过设置边框大小，颜色，拼凑起来可以形成任意形状的三角形 。
文章插图
像这种不规则的三角形，延伸一下，放在气泡框上，就可以省去拼背景图片的麻烦了 。
文章插图
另外，关于气泡框，可以使用棱形字符（◆）来实现，设置其 font-size，颜色和背景色一致，定位可以使用 margin 负值和 absolute 绝对定位来实现 。
应用之圆角生成应该说是近似圆角，其实由一个高度非常小的梯形展示出来
上梯形（无上边框，下左右 3px 宽度，左右颜色去掉）+ 矩形 + 下梯形
文章插图
自适应圆角 1：
整个 rc 设置为 float: left 或 display: inline-block 分为top，bd，bottom，top 中又有两个层 rc1 和 rc2，rc1 只设置 border-top，高度为 0，并设置左右 margin 呈短小的一横线，rc2 只设置左右 border 并且左右 margin 小于 rc1，height 为 1px，中间 bd 设置左右 border，不设置左右 margin 。
推荐阅读
- 不粘锅第一次用需要怎么开锅 不粘锅首次使用需要开锅吗
- iPhone提示温度高无法正常使用，看完关键的这几点，手机不再发热
- 学会这几点，使用12306APP购票可以省下不少钱
- 天猫购物券使用规则 天猫双十一购物节采用了哪些促销方式
- 天然气取暖器好吗 天然气取暖器使用方法
- 60个非常实用的CSS代码片段，千万要收藏好了
- 当我们在使用 display: flex 的时候，浏览器到底发生了什么？
- 没看这篇干货，别说你会使用“缓存”
- ping基本使用详解
- 美的取暖器使用方法
