有没有一种CSS/HTML的方法可以从div的顶部/底部切割多个形状？

Question

对于这个问题，我真的不确定从哪里开始（我是一名平面设计师，正在深入了解HTML/CSS，但我的经验非常有限，所以目前无法解决此问题）：

在我最新的网站设计中，我使用带状阴影来分隔网站的各个部分：每个部分轮流使用标准页面背景和应用10%黑色透明度叠加层，以区分下一节。

问题是，每个新部分都应该有一个由三个箭头组成的块切出较暗（或较亮）的背景，如下所示：

我知道我可以通过图片来实现这一点，但由于背景是重复图案，因此该解决方案并不适用。

有没有基于HTML/CSS的方法来解决这个问题？

请问是否有任何建议或提示可以帮助我解决这个问题？基本上，所有浅色部分都需要以三个10%黑色透明度的箭头开头，所有深色部分都需要以从10%透明度背景中切出的三个箭头开头。

- Michael Sloan

---

你说：“由于背景是一个重复的图案，所以那个解决方案并不适用。” 也许这个页面可以帮到你： http://www.w3schools.com/cssref/pr_background-repeat.asp - Itay

不是很好。w3schools是一个糟糕的资源。你是指 https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat 吗？ - John Dvorak

@Jan Dvorak 我认为理解像 background-repeat 这样简单的东西已经足够了 :) 但下次我会尝试提供更好的资源。 - Itay

我觉得我可能没有解释清楚：背景已经重复了。三角形只是用来分隔各个部分的。我不能简单地将三角形作为图片插入，因为微妙的背景图案在每个部分都会重复出现，所以如果它们不是显示页面背景的剪影，用户滚动时会出现视觉中断。简而言之，我不能简单地制作三角形的图片，否则会破坏无缝滚动网站并保持背景图案完整的能力。 - Michael Sloan

黑色和白色部分都有重复的背景，还是只有其中一种颜色有？ - cimmanon

Answer 1

梯形顶部边框的容器

梯形:
我使用伪元素::before在顶部添加所需的边框。
选择将此内容显示为块，以便其获得其容器的大小。
将此元素相对定位，使其不在其容器内显示。position:relative; & top: -30px;
边框固定为30像素，这就是为什么它显示为-30像素更高，因此正好位于我们的.cut-out上方。

透明度: 使用rgba()设置颜色可以设置颜色的不透明度。
因此，rgba(0,0,0, 0.1)将容器/梯形设置为10%的不透明度。其中最后一个值为1将等于100%的不透明度。(在这种情况下，您应该使用rgb()代替)

body {
  margin: 0;
}
main {
  background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
  display: inline-block;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100px;
  height: 150px;
  margin: 40px 0 0 0;
}
.cut-out::before {
  content: "";
  border-bottom: 30px solid rgba(0, 0, 0, 0.1);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  display: block;
  position: relative;
  top: -30px;
}
.stop {
  clear: both;
}

<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
  <div class="stop"></div>
</main>

- Persijn

Answer 2

这里有一个fiddle可以帮助你。这是使用简单的CSS完成的，我在这里只是举例说明。你可以根据自己的需求进行调整。

示例HTML：

<div class="cutout"></div>

而且还有CSS

.cutout {
    width: 100px;
    height: 0px;
    background: none;
    border-bottom: solid 30px rgba(0, 0, 0, 0.1);
    border-right: solid 30px transparent;
    border-left: solid 30px transparent;
    border-top: solid 0 transparent;
}

这将为您提供要重复的元素之一。为了更好地理解其工作原理，请查看以下CSS在更新后的fiddle中：

.cutout {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.05);
    border-bottom: solid 30px rgba(0, 255, 0, 0.1);
    border-right: solid 30px rgba(0, 0, 0, 0.05);
    border-left: solid 30px rgba(0, 0, 0, 0.05);
    border-top: solid 0 rgba(0, 0, 0, 0.05);
}

基本上，我们将transparent颜色分配给右侧和左侧边框，并将div的高度设置为0。这意味着只有底部边框保持可见，并且由于边框宽度形成梯形形状。

编辑：看起来@Myke发布的链接已经展示了这个，我建议尝试使用类似的代码，直到您对如何呈现类似的形状有一个好的想法。

- godfrzero