如何创建此侧边栏菜单？

Question

我需要创建一个像http://wrapbootstrap.com/preview/WB07061TJ这样的侧边栏菜单，但我找不到当前项目的图像资源（白色箭头）。

我该怎么做？

Answer 1

这是CSS border triangle trick：

你可以在绝对位置使用span元素来实现这个目标，你想要箭头和下面的类

.triangle {
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    border-right: 5px solid white;
}

作为一方不是：这个“特征”不是这个http://jsfiddle.net/Xjmp5/

的边缘情况

Answer 2

箭头由2 div-s

组成

你可以看到代码，他设置div宽度：0，高度：0，行高：0，字体大小：0以确保没有宽度和高度

在这种情况下，如果您将边框设置为4种不同的颜色，您将看到4个三角形，形状为正方形

接下来要做的是设置border-left，border-top，border-bottom transparent。然后你得到一个三角形，

你要做的最后一件事是制作另一个白色三角形并将其覆盖在第一个上，然后你会得到箭头