Question

我正在尝试制作一个CSS之字形垂直边框。我一直在看这个Codepen以供参考。我的尝试只是制作钻石而且我一直在玩它但似乎无法让它发挥作用。这是我的Codepen。

body {
  margin: 0;
  padding: 0;
}
#ribbon {
  background: whitesmoke;
}
#ribbon ul {
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
  list-style-type: none;
}
#ribbon ul li {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#ribbon ul li:not(:last-child) {
  border-right: solid;
}
#ribbon .v-zigzag {
  background: linear-gradient(135deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(225deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(45deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb), linear-gradient(315deg, transparent, transparent 75%, #b6b5eb 75%, #b6b5eb);
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
}

<section id="ribbon">
  <ul>
    <li class="v-zigzag">Mode 1</li>
    <li>Mode 2</li>
    <li>Mode 3</li>
    <li>Mode 4</li>
  </ul>
</section>

Answer 1

~~示例代码使用SVG图像，它们被编码到CSS中。~~ 更新：不，它没有，抱歉。但我仍然认为这是最好的解决方案。

它使用两个锯齿形图案：一个水平和另一个垂直。然后它只覆盖除了带有不透明元素的边框以外的所有内容。

当您更改背景对齐时，该模式不再适用，您将获得这些钻石。你可以想到一个不同的模式......或者只是覆盖左边的部分。

删除之前：因为它用于水平线
将：后移至左边距并调整其宽度以仅显示一个条

.bordered：after { ... 左：0; 宽度：26em;

替代解决方案（我想出了一个使用当前标记的更好的解决方案）：

<li class="v-zigzag">Test</li></ul>

.v-zigzag {
     position: relative;
     background: linear-gradient(45deg, #ccc 5px, transparent 0) 0 5px, linear-gradient(135deg, #ccc 5px, #fff 0) 0 5px;
     background-position: right top;
     background-repeat: repeat-y;
     background-size: 10px 10px;
}
.v-zigzag:before {
    content:"";
    position: absolute;
    background: linear-gradient(45deg, #fff 5px, transparent 0) 0 5px,linear-gradient(135deg, #fff 5px, transparent 0) 0 5px;
    background-color: transparent;
    background-position: right top;
    background-repeat: repeat-y;
    background-size: 10px 10px;
    width: 10px;
    right: 3px;
    top: 0;
    bottom: 0;
 }

说明：

之字形不是边界，它实际上是.v-zigzag的背景。它也不是一条线，它在左侧是平的而在右边则是锯齿形。

然后我们在顶部使用其他背景，如第一个但是白色，我们将它放在右边3px，用白色曲折覆盖大部分第一个背景。这样，产生的之字形线实际上是唯一的部分＆＃34;可见＆＃34; （不是白色的）背景。

我们使用：before选择器而不是嵌套的div。属性内容（即使它是一个空字符串）设置为元素的：before或：之后，会创建一个＆＃34;某些东西＆＃34;行为就像任何其他元素一样，这个元素在DOM中不是主导但是表现得如此。而这个伪元素是白色的锯齿形，漂浮在灰色背景上。

如何获得一个有效的CSS Zigzag边框？

1 个答案: