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

Question

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

我的意思是关于网页上的这个常见细节(例如，这个截图来自 github):



我有示例代码 here 和单击按钮时显示为下拉菜单的菜单。我设法通过 CSS 为 40px 的菜单添加了边距，因此它被按下了。这将为三 Angular 形提供一些空间，但是如何在 github 上像它一样添加这个三 Angular 形指针？

Answer 1

Codepen solution
我相信你需要这样的东西:

.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 tricks