自定义下拉CSS子菜单栏

Question

到目前为止，我已经制作了一个常规的菜单栏，但我不知道如何制作一个自定义的CSS子菜单栏，如下所示。任何人有任何指针？

照片：

如何使小箭头指向布局按钮？

Answer 1

小三角形是三件事的组合：

• :before或:after伪选择器
• 相对定位
• CSS Triangles

因此，基本上使用这些规则将菜单的:before设置为三角形并适当地设置它的位置。您可能需要在伪选择器上执行content: ' '; height: 0; width: 0; overflow: hidden;之类的操作才能使其正常工作。

Answer 2

历史上，这是通过插入三角形图像并将其放置在盒子外面来完成的。

但是，您可以使用CSS transform: rotate(45)或图标字体执行此操作。我稍后会尝试在此处发布代码段。

Answer 3

此codepen显示了如何执行此操作：http://codepen.io/anon/pen/iEvDn

我没有创建它，我在此处找到它：https://css-tricks.com/forums/topic/triangle-shape-in-the-menu/

代码笔中css的关键部分是::before选择器：

.box:before{
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  left:-10px;
  top:20px;
  transform:rotate(145deg) skew(20deg);
  background:inherit;
}

修改

这是我根据codepen中的信息创建的小提琴，这个小提示符在你想要的顶部有三角形：https://jsfiddle.net/jrs7oxb0/1/