Angular Material md-card 边框底部带有向下箭头

【问题标题】：Angular Material md-card border bottom with down arrowAngular Material md-card 边框底部带有向下箭头
【发布时间】：2018-08-18 12:45:32
【问题描述】：

我想为 Angular Material 卡片添加箭头效果（见下图），但我不知道该怎么做。我已经设置了一个小提琴来寻求帮助。

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

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

【问题讨论】：

标签： angularjs angular-material border md-card

【解决方案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/

【讨论】：