具有剪切路径的CSS面包屑-需要“负”标记座标 [英] CSS breadcrumbs with clip-path - need of "negative" coordinates

问题描述

我正在尝试使用剪切路径创建面包屑路径。

  #clip span {padding：3px 20px;背景颜色：＃666;白颜色;显示：inline-block;剪贴路径：多边形（0 0、90％0、100％50％，90％100％，0 100％，10％50％）;}  

 < div id = clip> < span> hello< / span>小< span> span> world< / span> span>欢迎！< / span< / div /> code> 

这给出了

90％，相对于单词的长度。因此欢迎！

当然，我可以在两个单词之间添加两个空白块，这些单词将粘贴在前后跨度上，形状为

但是有没有一种方法可以为多边形，类似于 -10px （将从元素的右/底部开始计数；因此，对于100px的元素，将给出90px，即从另一侧算起10px的元素）？

因此，几何形状之类的规则将类似于（在CSS中不起作用，因为从左/顶部算起-10px）

 剪切路径：多边形（0 0，-10px 0，100％50％，-10px 100％，0 100％，10px 50％）; 
  

解决方案

您可以尝试 calc ，则您可以使用（100％-10px）之类的东西。它将像元素右侧的负坐标一样：

 ＃剪辑跨度{padding：3px 20px;背景颜色：＃666;白颜色;显示：inline-block;剪切路径：多边形（0 0，calc（100％-10px）0，100％50％，calc（100％-10px）100％，0 100％，10px 50％）;}  

 < div id = clip> < span> hello< / span>小< span> span> world< / span> span>欢迎！< / span< / div /> code> 

我也建议考虑其他更受支持的方式。

使用多个背景：

  #clip span {颜色：白色；显示：inline-block;填充：3px 20px; border-right：10px纯透明； border-left：10px纯透明；背景：线性渐变（到右上方，透明47％，＃666 51％）左上边框，线性渐变（到左上角，透明47％，＃666 51％）右下边框，线性-渐变（到右下，透明47％，＃666 51％）左下边框，线性渐变（到左下，透明47％，＃666 51％）右上边框，＃666填充框;背景尺寸：10px 50％； background-repeat：no-repeat;}  

 < div id = clip> < span> hello< / span>小< span> span> world< / span> span>欢迎！< / span< / div /> code> 

使用伪元素和偏斜变换：

  #clip span {color：white;显示：inline-block;填充：3px 15px;边距：0 5px;位置：相对； z-index：0;}＃clip span：before，＃clip span：after {content：;位置：绝对； z索引：-1；左：0;对：0;高度：50％;背景：＃666;}＃剪辑跨度：在{top：0;之前transform：skewX（45deg）;}＃剪辑范围：在{bottom：0;之后transform：skewX（-45deg）;}  

 < div id = clip> < span> hello< / span>小< span> span> world< / span> span>欢迎！< / span< / div /> code> 

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

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%);

解决方案

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>

这篇关于具有剪切路径的CSS面包屑-需要“负”标记座标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！