title: Put traingle on top of mat menu
body: <p>I have my menu as follows. how i can put a triangle upwards to my dropdown menu.</p>
  
  <pre><code>  &lt;button mat-icon-button [matMenuTriggerFor]="appMenu"&gt;
      &lt;mat-icon&gt;arrow_drop_down&lt;/mat-icon&gt;
    &lt;/button&gt;
  
    &lt;mat-menu #appMenu="matMenu"&gt;
      &lt;button mat-menu-item [matMenuTriggerFor]="subMenu"&gt;&lt;span translate=""&gt;header.menu.language&lt;/span&gt;&lt;/button&gt;
    &lt;/mat-menu&gt;
  
    &lt;mat-menu #subMenu="matMenu"&gt;
      &lt;button mat-menu-item *ngFor="let language of languages" (click)="setLanguage(language)"&gt;{{ language }}&lt;/button&gt;
    &lt;/mat-menu&gt;
  </code></pre>
  
  <p>Current look </p>
  
  <p><a href="https://i.stack.imgur.com/gpD5O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gpD5O.png" alt="enter image description here"></a></p>
  
  <p>I want </p>
  
  <p><a href="https://i.stack.imgur.com/7fmD4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7fmD4.png" alt="enter image description here"></a></p>
  
  <p>i added the following css and than enclosed mat-menu inside the div with the css but not working.</p>
  
  <pre><code>.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  
    border-bottom: 5px solid black;
  }
  </code></pre>