[英]Angular Material md-card border bottom with down arrow
我想向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;
}
根据您需要的边界三角形的大小来更改边界宽度(因此您必须处理其位置上限值)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.