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

Question

.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;
}

<!--===== 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>

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,

Please show us what code you have tried, what research you have already done. I'm afraid SO isn't an ab initio coding service, but we are very happy to help you debug your code. See https://stackoverflow.com/help/how-to-ask — A Haworth, Apr 13 '23 at 08:37
If you are totally stuck on creating these shapes, have a look at CSS clip-path. — A Haworth, Apr 13 '23 at 08:47
Have a look on codepen if you can find some examples of breadcrumbs or menus that look visually similar to what you are trying to achieve. Perhaps something like https://codepen.io/iamglynnsmith/pen/BRGjgW could help you start up. He used a pseudo element on the right, that he rotated to make it look like an arrow. I imagine that `transform` could help you "squash" it with a `scale(0.5, 1)` to make it look more like what you would like to have. This one too: https://codepen.io/renaudtertrais/pen/nMGWqm — Patrick Janser, Apr 13 '23 at 09:03

InSync · Accepted Answer · 2023-04-13T09:59:14.827

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

#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
    );
}

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

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

#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
  );
}

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

score -1 · Answer 2 · edited Apr 13 '23 at 11:23

.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;
}

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

Your answer could be improved by adding more information on what the code does and how it helps the OP. — Tyler2P, Apr 13 '23 at 11:23

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

2 Answers2