CSS Breadcrumbs responsive custom shape

Ask Question

Asked 6 months ago

Modified 6 months ago

Viewed 77 times

I've been trying to implement a breadcrumb pattern where the breadcrumb items are arrow shaped as the image bellow:

The arrow shaped breadcrumb item contains text and should be, at least, adjustable in width and possibly minor changes on the height.

I started using CSS for the arrow shape but got some 1px spacing that doesn't allow to fully match the design, also been trying to use clip-path but although I can get the shape I can't apply the border or the slight drop shadow present on the image.

Please take into consideration the shape has rounded corners with 4px, border color is #BBBCC4 and has a slight drop shadow of box-shadow: 0 1 2px 0 #37415114;

It's not a simple straight arrow shaped breadcrumb.

Is it possible to replicate this shape with CSS? Thanks in advance!

.breadcrumbs {
display:flex;
margin-top: 60px;
}

.breadcrumb-item {
  display:flex;
  align-items:center;
  background: #efefef;
  min-height:60px;
  min-width:186px;
}

.breadcrumb-item span {
  margin-left:20px;
}


.polygon {
  clip-path: polygon(0% 0%, 20px 50%, 0% 100%, calc(100% - 20px) 100%, 100% 50%, calc(100% - 20px) 0%);
}

.path {
  position: relative;
  background:red;
  clip-path: path('M168.723 3.01544C168.011 1.76914 166.685 1 165.25 1H7.46392C4.39263 1 2.46716 4.31793 3.99095 6.98456L15.4372 27.0154C16.1399 28.2452 16.1399 29.7548 15.4372 30.9846L3.99095 51.0154C2.46716 53.6821 4.39263 57 7.46392 57H165.25C166.685 57 168.011 56.2309 168.723 54.9846L182.437 30.9846C183.14 29.7548 183.14 28.2452 182.437 27.0154L168.723 3.01544Z');
  
}

.mask {
  background:lime;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 186 58"><path d="M168.723 3.01544C168.011 1.76914 166.685 1 165.25 1H7.46392C4.39263 1 2.46716 4.31793 3.99095 6.98456L15.4372 27.0154C16.1399 28.2452 16.1399 29.7548 15.4372 30.9846L3.99095 51.0154C2.46716 53.6821 4.39263 57 7.46392 57H165.25C166.685 57 168.011 56.2309 168.723 54.9846L182.437 30.9846C183.14 29.7548 183.14 28.2452 182.437 27.0154L168.723 3.01544Z" stroke-width="2" stroke="green" /></svg>') center/contain no-repeat;
  mask-mode: alpha; /* Usa o canal alpha (transparência) do SVG */
  mask-repeat: no-repeat;
}

<!-- svg image that should be displayed as background of the breadcrumb item. The item needs to grow in width according to the text -->

<svg width="185" height="60" viewBox="0 0 185 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_9578_890)">
<mask id="path-1-inside-1_9578_890" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.723 3.01544C168.011 1.76914 166.685 1 165.25 1H7.46392C4.39263 1 2.46716 4.31793 3.99095 6.98456L15.4372 27.0154C16.1399 28.2452 16.1399 29.7548 15.4372 30.9846L3.99095 51.0154C2.46716 53.6821 4.39263 57 7.46392 57H165.25C166.685 57 168.011 56.2309 168.723 54.9846L182.437 30.9846C183.14 29.7548 183.14 28.2452 182.437 27.0154L168.723 3.01544Z"/>
</mask>
<path d="M15.4372 27.0154L14.5689 27.5116L15.4372 27.0154ZM15.4372 30.9846L14.5689 30.4884L15.4372 30.9846ZM182.437 30.9846L183.305 31.4807V31.4807L182.437 30.9846ZM182.437 27.0154L183.305 26.5193V26.5193L182.437 27.0154ZM168.723 3.01544L169.591 2.51931L168.723 3.01544ZM168.723 54.9846L169.591 55.4807L168.723 54.9846ZM7.46392 2H165.25V0H7.46392V2ZM16.3054 26.5193L4.85919 6.48842L3.1227 7.4807L14.5689 27.5116L16.3054 26.5193ZM16.3054 31.4807C17.1838 29.9435 17.1838 28.0565 16.3054 26.5193L14.5689 27.5116C15.096 28.4339 15.096 29.5661 14.5689 30.4884L16.3054 31.4807ZM4.85919 51.5116L16.3054 31.4807L14.5689 30.4884L3.1227 50.5193L4.85919 51.5116ZM165.25 56H7.46392V58H165.25V56ZM181.569 30.4884L167.855 54.4884L169.591 55.4807L183.305 31.4807L181.569 30.4884ZM181.569 27.5116C182.096 28.4339 182.096 29.5661 181.569 30.4884L183.305 31.4807C184.184 29.9435 184.184 28.0565 183.305 26.5193L181.569 27.5116ZM167.855 3.51158L181.569 27.5116L183.305 26.5193L169.591 2.51931L167.855 3.51158ZM3.1227 50.5193C1.21797 53.8526 3.62481 58 7.46392 58V56C5.16045 56 3.71635 53.5116 4.85919 51.5116L3.1227 50.5193ZM165.25 2C166.326 2 167.321 2.57686 167.855 3.51158L169.591 2.51931C168.701 0.961431 167.044 0 165.25 0V2ZM165.25 58C167.044 58 168.701 57.0386 169.591 55.4807L167.855 54.4884C167.321 55.4231 166.326 56 165.25 56V58ZM7.46392 0C3.6248 0 1.21797 4.14741 3.1227 7.4807L4.85919 6.48842C3.71635 4.48845 5.16045 2 7.46392 2V0Z" fill="#BBBCC4" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M168.723 3.01544C168.011 1.76914 166.685 1 165.25 1H7.46392C4.39263 1 2.46716 4.31793 3.99095 6.98456L15.4372 27.0154C16.1399 28.2452 16.1399 29.7548 15.4372 30.9846L3.99095 51.0154C2.46716 53.6821 4.39263 57 7.46392 57H165.25C166.685 57 168.011 56.2309 168.723 54.9846L182.437 30.9846C183.14 29.7548 183.14 28.2452 182.437 27.0154L168.723 3.01544Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_9578_890" x="1.45801" y="0" width="183.506" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.215686 0 0 0 0 0.254902 0 0 0 0 0.317647 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9578_890"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_9578_890" result="shape"/>
  <clipPath id="path"
</filter>
</defs>
</svg>


<div class="breadcrumbs">
  <div class="breadcrumb-item polygon">
    <span>Some text inside the breadcrumb</span>
  </div>
  <div class="breadcrumb-item path">
    <span>Some text inside the breadcrumb</span>
  </div>
  <div class="breadcrumb-item mask">
    <span>Some text inside the breadcrumb</span>
  </div>
</div>

edited May 13 at 9:49

asked May 12 at 16:06

Mario Andrade

5353 silver badges24 bronze badges

Yes it is possible , with a css filter anpplying from an svg . keyword: gooey effect. Without any code and css attempt shown here , your question might soon be closed and will hardly get answers . SO helps but is not a code provider

G-Cyrillus
– G-Cyrillus

2025-05-12 19:20:26 +00:00
Commented May 12 at 19:20
Thanks for the feedback @G-Cyrillus, I've added the code to help replicate the issue

Mario Andrade
– Mario Andrade

2025-05-13 09:50:02 +00:00
Commented May 13 at 9:50
1

Okay, here is how i would do it from also an SVG, clip-path and filter. codepen.io/gc-nomade/pen/VYYqEeG . To create/update the SVG i used this to tune it codepen.io/gc-nomade/pen/jENQXNb . And here is a wellknown tutorial css-tricks.com/gooey-effect that explains it all :)

G-Cyrillus
– G-Cyrillus

2025-05-13 10:36:12 +00:00
Commented May 13 at 10:36
Thanks for the help @G-Cyrillus I see the container stretches which is a great help but the border and drop shadow issue that is present on the svg filters mantains. Any idea on how to implement it?

Mario Andrade
– Mario Andrade

2025-05-13 11:12:51 +00:00
Commented May 13 at 11:12
1

i updated the codepen and added the drop-shadow to the filter (I removed the fainted color to show it clearly :) )

G-Cyrillus
– G-Cyrillus

2025-05-13 11:30:02 +00:00
Commented May 13 at 11:30

| Show 1 more comment

0 Your Answer

Sign up or log in

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Collectives™ on Stack Overflow

CSS Breadcrumbs responsive custom shape

0

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Sign up or log in

Post as a guest