代码之家 › 专栏 › 技术社区 › gene b.

CSS箭头绑定LI项实现[重复]

css html

-4

gene b. · 技术社区 · 2 年前

我正在尝试使用创建一个面包屑路径 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>

它给出

虽然我喜欢这种方法的简单性,但问题来自坐标 90% ,它们相对于单词的长度。因此,“欢迎!”与“微小”的箭头角度不同。

当然,我可以在单词之间添加两个空白块,它们将按照需要的形状固定在前一个和后一个跨度上。

但是,有没有一种方法可以为 polygon ,有点像 -10px (从元素的右/下开始计数;因此,对于一个100像素的元素,这将给出90个像素,意味着从元素的另一侧开始计算10个像素)?

因此,类似“几何体”的规则应该是类似的(这在CSS中不起作用,因为-10个像素从左/上计数)

clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);

0 回复 | 直到 1 年前

Peter Mortensen icecrime 1 年前

我有一篇关于创建此类形状的详细文章: How to create Breadcrumb Navigation with CSS

你可以试试 calc 你用的东西像 (100% - 10px) 。它将表现为元素右侧的负坐标:

#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>

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

使用多个背景:

#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>你好</span>&书信电报;span>微小</span>&书信电报;span>世界</span>&书信电报;span>欢迎lt/span>
</div>

使用伪元素和偏斜变换:

#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>你好</span>&书信电报;span>微小</span>&书信电报;span>世界</span>&书信电报;span>欢迎lt/span>
</div>