17.CSS三角

像京东的这里

 这个就是css三角

css三角的原理实际上是对宽高为0的盒子设置边框，当只有一个边框有颜色时，其他边框颜色都为透明时，就会出现三角的效果

可以通过改边框宽度把三角搞大一点

我们可以把代码写简单一点

这样写使用不同方向的三角只用改border-bottom-color中间的bottom，如果要使用不同的颜色只需要改动后面的颜色值

我们看别人的css时可能会看到这两行

写这两行是照顾兼容性问题，大多数情况不写也没事儿

1  简易京东悬停效果

我们简单做一下开头提到的这个

 html是这样的

css是这样的

打开界面后是这样的

把鼠标放上去之后是这样的

2  特殊的三角形

我们还可以用CSS三角做这个

这种我们看出来是用一个矩形和一个三角形拼出来的，但我们明显发现这个三角形并非我们上面使用的 等腰直角三角形，所以我们先看一下怎么搞出这种特殊的三角形，我们现在将每一个边框都给上颜色

它的效果是这样的

2.1  一半的等腰直角三角形

当我们将一个其中一个边框的宽度置为0的时候，置为0的部分会消失，比如我现在将下部置为0

由于我们下部置为0，所以我们下部就消失了，这样我们就能得到一半的等腰直角三角形

2.2  等腰但不直角三角形

我们对其中的一个边框修改数值，就可以得到等腰但不直角的三角形

我们发现得到了三种三角形，他们的尺寸现在是这样的

3  京东价格例子

我们结合上面两种操作就不难得出我们这样的三角形，我们可以看出我们用的是左侧的边框，三角形的高大概是三角形底的三倍，所以我们这样搞

搞掉上边框，然后将左边框 置为 其余边框 的1/3

这样我们就得到了类似与案例中的三角形

我们回到例子中，html是这样的

css是这样的

效果是这样的

4  其他

4.1  旗子

他的css是这样的