CSS 带有 clip-path 的面包屑 - 需要 "negative" 坐标
CSS breadcrumbs with clip-path - need of "negative" coordinates
我正在尝试使用 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%
,它与单词的长度有关。因此 "welcome!" 与 "tiny" 没有相同的箭头角度。
当然,我可以在单词之间添加两个空白块,以粘附在前后跨度上,并根据需要调整形状。
但是有没有办法为 polygon
指定诸如 X-Windows 的 "geometry" 坐标样式,诸如 -10px
之类的东西(从 right/bottom 一个元素;因此对于一个 100px 的元素,这将给出 90px,这意味着从元素的另一侧开始 10px)?
因此,规则 "geometry" 类似于(在 css 中不起作用,因为 -10px 从 left/top 算起)
clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);
您可以尝试 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>hello</span><span>tiny</span><span>world</span><span>welcome!</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>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>
我正在尝试使用 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%
,它与单词的长度有关。因此 "welcome!" 与 "tiny" 没有相同的箭头角度。
当然,我可以在单词之间添加两个空白块,以粘附在前后跨度上,并根据需要调整形状。
但是有没有办法为 polygon
指定诸如 X-Windows 的 "geometry" 坐标样式,诸如 -10px
之类的东西(从 right/bottom 一个元素;因此对于一个 100px 的元素,这将给出 90px,这意味着从元素的另一侧开始 10px)?
因此,规则 "geometry" 类似于(在 css 中不起作用,因为 -10px 从 left/top 算起)
clip-path: polygon(0 0, -10px 0, 100% 50%, -10px 100%, 0 100%, 10px 50%);
您可以尝试 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>hello</span><span>tiny</span><span>world</span><span>welcome!</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>hello</span><span>tiny</span><span>world</span><span>welcome!</span>
</div>