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?

from the linked question did you see this: stackoverflow.com/a/65504085/8620333 ? — Temani Afif
– Temani Afif, Commented Feb 4, 2022 at 14:04
@TemaniAfif yes, still no success. as I said in the question they don't fit — Nami Poorsafargholi
– Nami Poorsafargholi, Commented Feb 4, 2022 at 14:13
@prettyInPink yes but it was a totally different approach with pseudo-elements I thought it may be confusing to write this after previous approach so i decided to create new question instead of making previous one hard to understand — Nami Poorsafargholi
– Nami Poorsafargholi, Commented Feb 4, 2022 at 14:15
This time i have came up with new idea of skew, (edit 3),please see again my answer — redoc
– redoc, Commented Feb 6, 2022 at 7:40

redoc · Accepted Answer · 2022-02-06 07:39:03Z

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

Thanks for your great answer, but there is a problem: if we count corners clockwise from the top-left corner we would have 6 of them by considering middle items, in your code, we don't have any rounded corner on point numbers 1, 2, 4, 5 and in the picture we have rounded corner on all of them, for better understanding of my idea please see this image: ibb.co/vBtpLx6
@NamiPoorsafargholi i have edited answer for those radius too ,try again
@NamiPoorsafargholi This time i have came up with new idea of skew, (edit 3),please see again my answer

Collectives™ on Stack Overflow

rounded corners and border for clip path at the same time

1 Answer 1

Great question , And a answer that fits properly

New Answer

Idea

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

A pen

Old Answer

This is my pen & I got idea from here

Idea

Features

Available variables

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Great question , And a answer that fits properly

New Answer

Idea

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

Old Answer

This is my pen & I got idea from here

Idea

Features

Available variables

3 Comments

Linked

Related