4

enter image description here 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?

Nami Poorsafargholi
  • 116
  • 6

1 Answers1

4

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

enter image description here

  • 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

Neptotech -vishnu
  • 1,096
  • 8
  • 23
  • 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: https://ibb.co/vBtpLx6 – Nami Poorsafargholi Feb 05 '22 at 10:28
  • @NamiPoorsafargholi i have edited answer for those radius too ,try again – Neptotech -vishnu Feb 06 '22 at 06:16
  • @NamiPoorsafargholi This time i have came up with new idea of *skew*, (**edit 3**),please see again my answer – Neptotech -vishnu Feb 06 '22 at 07:40