我想为 Angular Material 卡片添加箭头效果(见下图),但我不知道该怎么做。我已经设置了一个小提琴来寻求帮助。
https://jsfiddle.net/er1187/rng1pv4u/1/
<md-card flex layout-align='center center'>
<md-card-content>
TESTING
</md-card-content>
</md-card>
我想为 Angular Material 卡片添加箭头效果(见下图),但我不知道该怎么做。我已经设置了一个小提琴来寻求帮助。
https://jsfiddle.net/er1187/rng1pv4u/1/
<md-card flex layout-align='center center'>
<md-card-content>
TESTING
</md-card-content>
</md-card>
使用透明边框和框阴影创建它。
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;
}
根据您需要的边框的三角形大小更改边框宽度(&因此您必须处理其位置顶部值)。