Angular Material md-card border bottom with down arrow

Question

I would like to add an arrow effect to Angular Material cards (see image below) and I am not sure how to do so. I have set up a fiddle for help.

https://jsfiddle.net/er1187/rng1pv4u/1/

 <md-card flex layout-align='center center'>
   <md-card-content>
     TESTING
   </md-card-content>
 </md-card>

Answer 1

Create that using transparent border & box shadow.

md-card:after {
  content: "";
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 2px ;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 35px;
  left: 48%;
  border-width: 15px;
  border-style: solid;
  border-color: transparent #FFF #FFF transparent;
}

Change border width according to what size of that that border made triangle you need (& accordingly you've to handle its position top value).

https://jsfiddle.net/shantanu_k/a8omvs2b/1/