Matériau angulaire md-carte bord inférieur avec flèche vers le bas

Question

Je voudrais ajouter un effet de flèche aux cartes de matériau angulaire (voir l'image ci-dessous) et je ne suis pas sûr de savoir comment le faire. J'ai mis en place un violon pour obtenir de l'aide.

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

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

Answer 1

Créer qu'utiliser ombre boîte frontière & transparente.

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; 
} 

changement largeur frontière en fonction de la taille de cette frontière qui fait triangle dont vous avez besoin (& en conséquence que vous avez à gérer sa position valeur supérieure).

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