css - 如何创建这个侧边栏菜单？

Question

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

我怎样才能做到这一点？

Answer 1

这是一个CSS 边框三角形技巧：

您可以使用绝对位置的 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 width:0,height:0,line-height:0,font-size:0 以确保没有宽度和高度

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

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

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