使用CSS的border属性构建变形边框的方法总结

border基础回顾
border 顾名思义就是边框的意思，在 CSS 中，你可以透过 border 的语法来对边框做许多样化的设计变化，例如设定边框的宽度、样式、颜色等等，也可以隐藏边框，原则上 CSS 对于 border 的设计不只局限于 DIV 区块或 span 的边框，也可以应用到其他的网页元素的边框上，例如网页标题的边框、图片的边框（img border）... 等，所有的主流浏览器都支援 CSS border 属性。
CSS border 语法介绍：

标准的 css border 规则由左至右共有三个参数，每个参数间用半形空格隔开，第一个参数为边框的粗细（border-width），一般使用 px、em 等标准网页单位，第二个参数标示边框的颜色（border-color），可以使用色标准色码或颜色的英文名称，第三个参数是边框样式（border-style），可以设定实线、虚线、双实线、连续点 ... 等许多不同的风格。
简单回顾以后，我们下面来进入正题：

一、border边框变形记
前端开发者对于如何用纯css如何实现三角效果应该有一定了解了。但是大家真正在项目中用到这个效果并不是很多吧，而且并不是每个人都熟谙此纯css打造三角形的原理。所以今天粗拟一文，写给一些对此原理不是很精通的朋友。高手飘过吧！下面来看我是如何通过纯css来实现三角形的效果的。

我们首先来看上面一组图形，分别是两个正方形，两个长方形，并且每个形状中都包括不同的图形。值得一提的是这些形状是通过纯css来实现的，比较可喜的是它们兼容ie6…
等边四边形==图形的合体（不许有邪恶的想法！！）：
如果你要问这些是如何实现的呢？其实比较简单，只是平时大家很少关注罢了。我们习惯了用border定义边框，因为设计图的原因，大多是定义“1-5”像素的图形，并没有进行过深入的研究，比如border-left与border-top之间的衔接是怎样的呢？想要知道答案很简单，我们只需要将border-width的值增大就可以了，增大后我们会看到border之间的衔接是一条斜线。如上图所示了，下面贴上面部分的代码：