首先来看稀土掘金的首页
image.png
可以看见“开放社区”右边有一个小三角，想想实现过程，可以设置图片，也可以设置背景图片，当然这里要讲的还有一种比较巧妙的方法，就是利用盒子边框来设置。
.box{ height: 200px; width: 200px; background-color: pink; border: 1px solid black; } /设置一个盒子/ image.png
当我们把盒子的宽高设置成0，再把边框加粗。
.box{ height: 0; width: 0; background-color: pink; border: 50px solid black; } image.png
整个盒子的形态如上图所示，此时再把每个方向的边框颜色设置成不一样的。
.box{ height: 0; width: 0; background-color: pink; /* border: 50px solid black; */ border-bottom:50px solid red; border-top:50px solid blue; border-left:50px solid green; border-right:50px solid yellow; } image.png
此时三角形的效果就出来了，选择需要保留的边，非保留的边的颜色设置成与背景颜色一样的颜色就行了。
.box{ height: 0; width: 0; background-color: pink; border: 50px solid black; border-bottom:50px solid red; border-top:50px solid pink; border-left:50px solid pink; border-right:50px solid pink; } image.png
但是这里还有个问题要注意的是如果每次背景颜色换了后，就又要手动修改边框的颜色，会显得十分麻烦，其实更优的做法就是在设置不需要出现的边框颜色的时候使用rgba的颜色表示方法，前三个参数随便调个值，只需要保证透明度的参数为0就行了。
.box{ height: 0; width: 0; background-color: pink; border: 50px solid rgba(0,0,0,0); border-bottom:50px solid red; } image.png
现在大致实现一下掘金首页的开放社区的效果 .box1{ color: #c0c0c0; } .box2{ position: relative; top: 1em; border: 8px solid rgba(0,0,0,0); border-top: 8px solid #c0c0c0; } div:hover .box2{ position: relative; top: -1em; border: 8px solid rgba(0,0,0,0); border-bottom: 8px solid #c0c0c0; }
