为啥会想到border呢？

背景：在设计稿中经常有实体的倒三角形，或者是各个方向的 < 展开收起。很常见，我的处理方式也很常见，就是找设计师要字体图标库或者svg，贴上去简单

转折：有一天领导看到我在用svg贴的时候，说了一句这个用border画很快的，很简单，都是一些规则的图形

思考：我不要在网上找代码了，我试一试自己写，自己理解吧，网上有很多代码但是我不太能够理解。我要自己写，有一次看到朋友给我的代码里面有 padding:10px 5px 9px 像这种三个值的我很少用，他却用的很溜。border是一个简写属性，也有这样的，我顺便一起学了

来说说border吧

我们先来看看border画实体三角形，空的三角形的效果吧

在线效果

border

line的实现思路1

1. border-width:1px;这样就有一个盒子了

2. 把盒子的两个边变成透明的 border-right-color: transparent;border-bottom-color: transparent;

3. transform:ratate(xx) 旋转一个你要的角度

4. 这个实现思路是我最喜欢的啦

line的实现思路2

1. border-width 只画我们要显示的框，不需要的显示的边就设置0

2. transform:ratate(xx) 旋转一个你要的角度

3. 这个是我自己整理的思路我觉得还行把

总之就是，就是把border的属性分开写，从width入手画你要的图形，不要的想办法隐藏掉，通过颜色透明或者宽度为0 都可以。下面画实心的三角形也是一样的

solid 的实现思路

1. width=0height=0,border-xx-width画你要展示的边的宽度

2. 对于多余的边，你可以通过设置他的width为0或者颜色透明

3. transform:ratate(xx) 旋转一个你要的角度

一个简单的border画出来的图形就存在了

一些其他的想法

border-width,padding,margin,border-radious ….他们都是支持1-4个值的，让我们有一点困惑的可能就是三个值的时候表示什么意思 ，其实很简单，三个值的，中间那个值表示的左右两边的值。以后我可以这样写了，不用一个一个值的去设置了。长知识了

border-radius也可以玩他的四个角，然后出现不同的图形图案。什么圆形椭圆和border组合还能有各种各样的图形呢

秋月何时了，CSS3 border-radius知多少？ 这里就讲了很多border-radius 的用法和属性值，理解了这些方位到时候画各种图形就方便多了

纯CSS实现各类气球泡泡对话框效果

不管是border还是border-radius

我们都可以控制他的某一些方面的值来实现我们想要的效果，忽然间觉得这个是一个很有意思的活。玩6了css属性可以做很多很有意思很好玩的东西。 冰冻三尺非一日之寒。加油。有时间可以多练练多试试这些属性