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

I'd like to add a speech-bubble point on the top-right corner of my mat-menu-list but it doesn't seem to work. Is this possible?

I attempted wrapping the mat-menu-list with the below code:

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


Solution 1:[1]

Are you looking for something like this? I just played a bit around with the position values, removed z-index from the pseudo-element and removed the border-radius from the top right corner where the pseudo-element is generated.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sigurd Mazanti

Related Questions