How can I recreate this navigation bar using HTML and CSS?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.nav-bar {
  background-color: var(--nav-color );
  box-sizing: border-box;
  text-align: center;
  height: 43px;
  margin: 8px;
  overflow: hidden;
  border: 1.5px solid #000000;
}
.first {
  position: relative;
  z-index: 4;
  width: 106px;
  border-radius: 15px;
}
.second {
  width: 100px;
  position: relative;
  left: -29px;
  z-index: 3;
  border-radius: 0 15px 15px 0;
}
.third {
  width: 100px;
  position: relative;
  left: -60px;
  z-index: 2;
  border-radius: 0 15px 15px 0;
}

<!-- language: lang-html -->

<!--===== HEADER =====-->
  <header class="header">
    <!--===== NAV-BAR =====-->
    <a href=#home class="nav-bar first"><span class="nav-bar-title">Home</span></a>
    <a href=#about class="nav-bar second"><span class="nav-bar-title">About</span></a>
    <a href=#more class="nav-bar third"><span class="nav-bar-title">More</span></a>
</header>

<!-- end snippet -->

navigation bar in Realme file manager

I want to get triangular shaped right edges, tell me how can I recreat it.

Share if there is any template for similar looking navigation bar.

The snippet contains the HTML and CSS code of my version,

Perhaps you can make use of some conic-gradient():

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

#breadcrumb {
  display: flex;
  background: #f6ede4;
}

.item {
  padding: 1em 3em 1em 2em;
  background-image:
    conic-gradient(
      from 210deg at calc(100% - 1em) 50%,
      #f6ede4 120deg,
      transparent 120deg
    ),
    conic-gradient(
      from 210deg at 100% 50%,
      #ffffff 120deg,
      transparent 120deg
    );
}

<!-- language: lang-html -->

<div id="breadcrumb">
  <div class="item">Phone storage</div>
  <div class="item">Download</div>
  <div class="item active">Apps</div>
</div>

<!-- end snippet -->

...or some mask on a pseudo-element:

<!-- begin snippet: js hide: false -->

<!-- language: lang-css -->

#breadcrumb {
  display: flex;
  background: #f6ede4;
}

.item {
  position: relative;
  padding: 1em 2em;
}

.item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% + 1em);
  background-image:
    conic-gradient(
      from 210deg at calc(100% - 1em) 50%,
      #f6ede4 120deg,
      transparent 120deg
    ),
    conic-gradient(
      from 210deg at 100% 50%,
      #ffffff 120deg,
      transparent 120deg
    );
  -webkit-mask: conic-gradient(
    from 180deg at calc(100% - 2em) 50%,
    transparent 180deg,
    #000 180deg
  );
  mask: conic-gradient(
    from 180deg at calc(100% - 2em) 50%,
    transparent 180deg,
    #000 180deg
  );
}

<!-- language: lang-html -->

<div id="breadcrumb">
  <div class="item">Phone storage</div>
  <div class="item">Download</div>
  <div class="item active">Apps</div>
</div>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid blue;
}

<!-- language: lang-html -->

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

<!-- end snippet -->