本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。
开始前我们需要掌握什么知识点呢？
预备知识
border相关属性
-
border-width 边框的宽度
-
border-style 边框的样式
-
border-color 边框的颜色
预备知识掌握完成后
接下来看几个实际的小例子吧
案例举例
为了更加通俗易懂，demo用的是最简单的dom元素和css属性
1.
上图中重要的点就是斜边是如何产生的呢？
上代码：
关键的样式部分
很简单的就完成了这个斜边的操作功能
2.
上图的难点的是头部的小三角和底部的大三角
上代码：
关键的样式部分
demo是看完了
那上面的内容到底是怎么出来的呢？
原理解析
border属性为何能变化不同的几何图形呢
先看下面这段样式
上述样式产生的形状
我们通过border-width border-color可以任意变化每一条变的宽高，和颜色。任意组合就能组成不同的由三角形组成的其它几何形状了。
赶紧动手写起来吧。
