是否可以在 mat-menu-list 上创建点边框？

Question

我想在我的垫子菜单列表的右上角添加一个语音气泡点，但它似乎不起作用。这可能吗？

我尝试用以下代码包装 mat-menu-list：

   .menuPoint {
        position: relative;
        background: #143342;
        color: #FFFFFF;
        font-family: Arial;
        font-size: 20px;
        line-height: 120px;
        text-align: center;
        width: 250px;
        height: 120px;
        border-radius: 10px;
        padding: 0px;
    }
    .menuPoint:after {
        content: '';
        position: absolute;
        display: block;
        width: 0;
        z-index: 1;
        border-style: solid;
        border-width: 0 0 20px 20px;
        border-color: transparent transparent  #143342 transparent;
        top: -20px;
        left: 95%;
        margin-left: -10px;
    }

<div class="menuPoint"></div>

Answer 1

您正在寻找这样的东西吗？我只是稍微调整了一下位置值，从 pseudo-element 中删除了 z-index，并从生成 pseudo-element 的右上角删除了 border-radius。

.menuPoint {
  position: relative;
  background: #143342;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  width: 250px;
  height: 120px;
  border-radius: 10px 0px 10px 10px;
  padding: 0px;
  /* for demo purpose */
  margin-top: 50px;
}

.menuPoint:after {
  content: '';
  position: absolute;
  display: block;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #143342 transparent;
  top: -20px;
  right: 0;
}

<div class="menuPoint">hey there!</div>

是否可以在 mat-menu-list 上创建点边框？

Is it possible to create a point border on a mat-menu-list?

css

angular