rounded corners and border for clip path at the same time

Question

Hello, I'm trying to build the breadcrumb shown in the picture I've reviewed tons of solutions for the breadcrumbs but none of them could make rounded corners, so I decided to use clip-paths.

here is my code now :

.box {
      width: 425px;
      height: 90px;
      background-color: #dfdfdf;
      color: white;
      clip-path: polygon(90% 10%, 100% 50%, 90% 90%, 0% 90%, 10% 50%, 0% 10%);
      position: relative;
    }

<div class="box"></div>

I've tried to use methods from this topic but in this case, when we combine two paths for creating border, rounded corner maker SVG does not apply to the inner one. if we nest them in order to apply SVG to the inner one they don't fit.

any ideas to achieve this?

Answer 1

Great question , And a answer that fits properly

This answer is for the case you said

they don't fit.

And so it fits properly

New Answer

:root {
  --break: 0.3333333333em;
  --textColor: #4285f4;
  --bg: #eee;
  --deegree: 20deg;
  --borderRadius: 5px;
  --BorderColor: rgba(0, 0, 0, 0.25);
  --BorderThick: 2px;
  --width: 75%;
  --height: 20px;
}
.centerer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
.multi-step-list {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
  width: var(--width);
  margin-left: auto;
  margin-right: auto;
}

.multi-step-item {
  position: relative;
  width: 100%;
  margin: 0 var(--break);
  z-index: 2;
  border-radius: var(--borderRadius);
}

.multi-step-item .item-title {
  position: relative;
  margin: 0;
  z-index: 2;
}

.multi-step-item .item-title {
  color: var(--textColor);
  font-weight: 600;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.item-wrap {
  padding: calc(var(--height) / 2);
  position: relative;
  height: 100%;
}
.item-wrap:before,
.item-wrap:after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 50%;
  z-index: 1;
  background-color: var(--bg);
}
.item-wrap:before {
  top: 0;
  transform: skew(var(--deegree));
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  border-color: var(--BorderColor);
  border-width: var(--BorderThick);
  border-style: solid;
  border-bottom-width: 0px;
}
.item-wrap:after {
  bottom: 0;
  transform: skew(calc(0deg - var(--deegree)));
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  border-color: var(--BorderColor);
  border-width: var(--BorderThick);
  border-style: solid;
  border-top-width: 0px;
}

<div class="centerer">

  <div class="multi-step">
    <ul class="multi-step-list">
      <li class="multi-step-item">
        <div class="item-wrap">
          <p class="item-title">Step One</p>
        </div>
      </li>
      <li class="multi-step-item">
        <div class="item-wrap">
          <p class="item-title">Step Two</p>
        </div>
      </li>
      <li class="multi-step-item">
        <div class="item-wrap">
          <p class="item-title">Step Three</p>
        </div>
      </li>
      <li class="multi-step-item">
        <div class="item-wrap">
          <p class="item-title">Step Four</p>
        </div>
      </li>
    </ul>
  </div>
</div>

Idea

• As shown above we dive rectangle into two parts,give border radius...,and skew the rectangle,the result is got finally

Sorry posting here in stackoverflow don't run well(smoothly),try the pen below

A pen

---

Old Answer

:root {
    --radius: 15px;
  --radius2: 15px;/*Edit:2*/
    --OuterRadius: 15px;
    --height: 120px;
    --bg: #ddd;
    --borderBg: rgba(0, 0, 0, 0.25);
    --textColor: #666;
    --thick: 1px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0 40px;
}

.breadcrumb {
    display: flex;
    border-radius: var(--OuterRadius);
    overflow: hidden;
    margin: auto;
    text-align: center;
    top: 50%;
    width: 100%;
    height: var(--height);
    background-color: var(--bg);
    font-size: 14px;
}

.breadcrumb .h {
    position: relative;
    display: flex;
    flex-grow: 1;
    text-decoration: none;
    margin: auto;
    height: 100%;
    padding-left: 38px;
    padding-right: 0;
    color: var(--textColor);
}

.breadcrumb .h:first-child {
    padding-left: 15.2px;
}

.breadcrumb .h:last-child {
    padding-right: 15.2px;
}

.breadcrumb .h:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: calc(var(--height) + var(--thick));
    height: calc(var(--height) + var(--thick));
    top: calc(0px - (var(--thick) / 2));
    right: calc(0px - (var(--height) / 2));
    background-color: var(--bg);
    border-top-right-radius: var(--radius);
  border-top-left-radius: var(--radius2);
  border-bottom-right-radius: var(--radius2);
    transform: scale(0.75) rotate(45deg);
    box-shadow: var(--thick) calc(0px - var(--thick)) var(--borderBg);
    z-index: 1;
}

.breadcrumb .h:last-child:after {
    content: none;
}

.breadcrumb__inner {
    display: flex;
    flex-direction: column;
    margin: auto;
    z-index: 2;
}

.breadcrumb__title {
    font-weight: bold;
}

/*responsive*/

@media all and (max-width: 1000px) {
    .breadcrumb {
        font-size: 12px;
    }
}

@media all and (max-width: 710px) {
    :root {
        --radius: 15px;
        --OuterRadius: 15px;
        --height: 70px;
    }
    .breadcrumb__desc {
        display: none;
    }
}

<div class="container">
    <div class="breadcrumb">
        <div class="h">
            <span class="breadcrumb__inner">
                <span class="breadcrumb__title">Website Root</span>
                <span class="breadcrumb__desc">First Item</span>
            </span>
        </div>
        <div class="h">
            <span class="breadcrumb__inner">
                <span class="breadcrumb__title">Page Depth 02</span>
                <span class="breadcrumb__desc">Second Item</span>
            </span>
        </div>
        <div class="h">
            <span class="breadcrumb__inner">
                <span class="breadcrumb__title">Page Depth 03</span>
                <span class="breadcrumb__desc">Third Item</span>
            </span>
        </div>
        <div class="h">
            <span class="breadcrumb__inner">
                <span class="breadcrumb__title">Page Depth 04</span>
                <span class="breadcrumb__desc">Fourth Item</span>
                <span class="breadcrumb__desc">With Additional Line</span>
            </span>
        </div>
        <div class="h">
            <span class="breadcrumb__inner">
                <span class="breadcrumb__title">Page Depth 05</span>
            </span>
        </div>
    </div>
</div>

This is my pen & I got idea from here

Idea

• Use the :after as an object, give it a border-radius, Tilt/rotate it to form the arrow
• Clip the arrow, and do other stuff, like border-color...

Features

• Responsive
• Automatic
• Use of CSS variables

Available variables

• radius
• OuterRadius
• height
• bg
• borderBg
• textColor
• thick
• degree

Tip: You may try the same idea of rotating the :after element for just a single item