6

I'm trying to make a breadcrumbs path using clip-path.

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}
<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

which gives

enter image description here

While I like the simplicity of that method, the problem comes from the coordinates 90%, which are relative to the length of the word. Thus "welcome!" does not have the same arrow angle as "tiny".

Of course, I could add two blank blocks between the words that would stick to previous and followings spans, shaped as required.

But is there a way to specify something like the "geometry" coordinates style of X-Windows for a polygon, something like -10px (which would count from the right/bottom of an element ; thus for a 100px element, that would give 90px, meaning 10px from the opposite side of an element )?

Thus, the rule, "geometry" like, would be something like (which doesn't work in css, since -10px counts from the left/top)

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Déjà vu
  • 28,223
  • 6
  • 72
  • 100
  • I know it has nothing to do with the question but is a solution with :before/:after element will be an alternative for you ? or you know how you can do it but you need to see if how with clip-path ? – Temani Afif Oct 15 '17 at 13:04
  • Have you tried using `` (`closest-side` or `farthest-side`) or maybe to use SVG `clip-path: url(#svgID);` ? – Krusader Oct 15 '17 at 13:09
  • @Krusader I prefer to avoid the SVG solution - as for "fill-rule" how would you use it, in this case? – Déjà vu Oct 15 '17 at 14:13

1 Answers1

5

You can try calc and you use something like (100% - 10px). It will behave like a negative coordinate for the right of the element : 

#clip span {
  padding: 3px 20px;
  background-color: #666;
  color: white;
  display: inline-block;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

I would also suggest to consider other ways more supported.

Using multiple background:

#clip span {
  color: white;
  display: inline-block;
  padding: 3px 20px;
  border-right:10px solid transparent;
  border-left:10px solid transparent;
  
  background:
    linear-gradient(to top    right,transparent 47%,#666 51%) top left     border-box,
    linear-gradient(to top    left ,transparent 47%,#666 51%) bottom right border-box,
    linear-gradient(to bottom right,transparent 47%,#666 51%) bottom left  border-box,
    linear-gradient(to bottom left ,transparent 47%,#666 51%) top right    border-box,
    #666 padding-box;
  background-size:10px 50%;
  background-repeat:no-repeat;
}
<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>

Using pseudo element and skew transformation:

#clip span {
  color: white;
  display: inline-block;
  padding: 3px 15px;
  margin:0 5px;
  position:relative;
  z-index:0;
}
#clip span:before,
#clip span:after {
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  height:50%;
  background:#666;
}
#clip span:before {
  top:0;
  transform:skewX(45deg);
}
#clip span:after {
  bottom:0;
  transform:skewX(-45deg);
}
<div id="clip">
  <span>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415