角向材質md卡邊框底部向下箭頭

Question

我想給角材質卡片添加一個箭頭效果（見下圖），我不知道如何去做。我已經設置了一個小提琴幫忙。

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

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

Answer 1

創建使用透明邊框&箱的影子。

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

更改邊框根據你需要什麼尺寸的是該邊界由三角形（&因此你已經處理它的頂部位置值）的寬度。

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