带有工具栏的弯曲顶部边框

Question

我正在使用mat-toolbar，我想创建底部导航。与此enter image description here

相似

我无法在顶部边框处获得曲线

我的结果： enter image description here

这是我的代码：

HTML

<div class="footer">   
    <mat-toolbar class="toolbarNav">
        <mat-icon class="material-icons color_blue" >home</mat-icon>
        <mat-icon class="material-icons color_blue">question_answer</mat-icon>
       <div class="create"> <button type="button" class="btn btn_create"
            (click)="openDialog()"><img  src="../../../assets/icons/Group 2090.svg"></button></div>
        <mat-icon class="material-icons color_blue" >notifications</mat-icon>
        <mat-icon class="material-icons color_blue" >person</mat-icon>
    </mat-toolbar>
</div>

Answer 1

我认为一个好的解决方案是在您提议的表单中使用背景 svg，您尝试过吗？有一个示例 https://stackblitz.com/edit/angular-8uxnb4?file=src/app/toolbar-overview-example.css 显示添加图像作为背景，如果您使用 SVG，它将允许您使用所有您喜欢的形状，如果您需要一个简单的 svg 用于测试目的，请告诉我，我为您创建一个用于测试目的。