是否有CSS / HTML方法从div的顶部/底部剪切多个形状？

Question

我老实说不知道从哪里开始（我是一个平面设计师，深入挖掘HTML / CSS，但我目前的经验相当渺茫，所以这个问题目前超出了我的能力） ：

在我的最新网站设计的一部分中，我已经用带状阴影划分了网站的各个部分：部分在标准页面背景和应用10％黑色透明度覆盖之间交替，用于区分下一部分。

问题是每个新的部分应该有一个由三个中心箭头组成的块，从上面的较暗（或较浅）阴影中切出来，如下所示：

我知道如何使用图像来管理它，但由于背景是一种重复模式，解决方案无法真正起作用。

任何有助于我解决此问题的建议/提示？基本上，所有灯光部分都需要以三个10％黑色透明度的箭头开始，所有暗部分都需要从10％透明背景中切出三个箭头开始。

是否有基于HTML / CSS的方法来执行此操作？

Answer 1

具有梯形顶部边框的容器

<强>梯形：
我在顶部添加了一个伪元素 ::before 选择以此方式将此内容显示为块，以获取其容器的大小 将此元素定位为相对，因此它不会显示在其容器内。 position:relative;＆amp; top: -30px;
边界得到一个静态的30px，这就是为什么它显示-30px更高，所以它恰好高于我们的.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>

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;
}

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

.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发布的链接已经展示了这一点，我建议您使用这样的代码，直到您对如何渲染类似的形状有所了解。