Ionic 4, Tabs Style

Ionic Framework
1

I have been trying to create tab menu like:

50aKq
50aKq1080×537 21.8 KB

Have tried to create this so far:

image

Can anyone help me o create a curve here. Have also tried with ion-fab.

Here is the code;

tabs.page.scss


.tabHeader{
    padding-right: 5px;
    padding-left: 5px;
}
.tab1 {
  background-color: black;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.tab2 {
  border-top-right-radius: 40px;
  background-color: black;
}
.tab3 {
  width: 25px;
  border-radius: 52%;
  background-color: black;
}
.tab4 {
  border-top-left-radius: 40px;
  background-color: black;
}
.tab5 {
  background-color: black;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

tabs.page.html

<ion-tabs>

    <ion-tab-bar slot="bottom" class="tabHeader">
        <ion-tab-button tab="tab1" class="tab1">
            <ion-icon name="md-home"></ion-icon>
            <ion-label>Home</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab2" class="tab2">
            <ion-icon name="clock"></ion-icon>
            <ion-label>History</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab1" class="tab3">
                <ion-icon name="ios-qr-scanner"></ion-icon>
                Start
        </ion-tab-button>

        <ion-tab-button tab="tab3" class="tab4">
            <ion-icon name="md-person"></ion-icon>
            <ion-label>Profile</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="tab3" class="tab5">
            <ion-icon name="md-person"></ion-icon>
            <ion-label>Profile</ion-label>
        </ion-tab-button>
    </ion-tab-bar>

</ion-tabs>```