如何在 Vuetify v-menu 组件中创建三角形指针？

Question

有没有办法v-menu在 Vuetify 2.x 中向组件添加三角形指针？

我的意思是网页上的这个常见细节（例如，此屏幕截图来自 github）：

我这里有示例代码，其中的菜单在单击按钮时显示为下拉菜单。我设法通过 CSS 向菜单添加边距40px，使其被向下推。这将为三角形提供一些空间，但是我如何添加这个三角形指针，就像它在 github 上的那样？

Answer 1

Codepen解决方案

我相信你需要这样的东西：

.my-menu {
  margin-top: 40px;
  contain: initial;
  overflow: visible;
}
.my-menu::before {
  position: absolute;
  content: "";
  top: 0;
  right: 10px;
  transform: translateY(-100%);
  width: 10px; 
  height: 13px; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 13px solid #fff;
}

影响：

注意：这是其工作原理的解释：css技巧