Angular 角形卡片的垂直剖面

我正在尝试复制mat卡布局，但尚未找到要搜索的正确单词。我正在使用angular，我想建立一个垫子卡，在左手边有一个垂直部分，允许我把一个标志放在剖面线的中心。我已经包括了一个我正在尝试重新创建的示例图像

我的名片

<div class="container">
    <div class="flex-container" fxLayout="row">
        <mat-card>
            <aside>

            </aside>
            <mat-card-header>
                <mat-card-title>{{project.name | uppercase}}</mat-card-title>
                <mat-card-subtitle>{{project.location}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
                <section>
                    Last Scan: {{project.lastScanDate | date: 'shortDate'}}
                </section>
            </mat-card-content>
        </mat-card>
    </div>
</div>

{{project.name |大写}}
{{project.location}
上次扫描：{{project.lastScanDate | date:'shortDate'}

---

我尝试添加一个“旁白”，但除非我包含文本，否则不会显示。

这只是一个您想要的原始示例，您可以通过将图像URL放入css来更改图标图像，因此这只是一个iea，您可以如何做您想要的事情。根据你的需要更换物品

.flex container{背景：#ccc；填充：20px 0；边框半径：5px；框大小：边框框；左边框：25px实心#5243AA；最小高度：150px；}
mat卡{显示：柔性；柔性方向：列；对齐内容：间距；最小高度：150px；左侧填充：20px；}
mat卡内容{左边距：-20px；背景：#fff；填充：10px；方框阴影：1px 3px 7px-1px#ddd；}
卡片标题{位置：相对；}
mat卡标题：{位置：绝对；内容：''；高度：20px；宽度：20px；左侧：-30px；顶部：0；背景图像：url(https://img.favpng.com/21/1/24/arrow-icon-circle-icon-direction-icon-png-favpng-Lmfw1dQK3ZtSWQX1kUmGXEPVh.jpg)；背景尺寸：封面；}

{{project.name |大写}}
{{project.location}
上次扫描：{{project.date | date:'shortDate'}

欢迎来到SO，展示您迄今为止的尝试？发布你的代码我没有真正尝试过任何东西，因为我不知道垂直部分叫什么。所以说真的，我只尝试过谷歌搜索…这不是它的工作原理，我们可以通过建议或改进代码来帮助您实现，没有人会为您陈词滥调抱歉。。但我在寻找建议，因为我不知道什么能完成我所寻找的。我已经编辑了我的帖子，至少包含了我的html代码.super！非常感谢。似乎我在谷歌上搜索剖面线和垂直线，而我本应该搜索边界的。我感谢你的帮助！这很有效！总是乐于助人