实现复杂背景布局的最佳方式是什么？

Question

我试图在下面使用一个div来获得一个渐开的灰色背景和一个“向下箭头”元素图像。见下图。 2条虚线是引导容器的边框。

解决此问题的最佳方法是什么？ 我的第一个想法是使用矩形的包装器，并使用箭头图像容器的宽度并将其放在此容器的底部。 有关最佳方法的任何想法吗？

Answer 1

执行此操作的一种方法是使用伪元素。只需给它们一个高度和宽度，然后旋转它们在中间相遇。通过足够的调整，您应该能够让它们占用足够的空间来匹配bootstraps容器的宽度。我无法通过调整大小来获得一致的结果，因此进行一些测试以确保它能够很好地满足您的需求将是一个好主意，但如果bootstraps容器使用媒体查询来调整大小并保持固定，否则这将完美地工作。

* {
  margin: 0;
}
div {
  width: 100%;
  height: 40vh;
  background: #aaa;
  position: relative;
}
div:before,
div:after {
  content: "";
  display: block;
  position: absolute;
  width: 30%;
  height: 50%;
  background: #aaa;
  bottom: -5%;
}
div:before {
  right: 49.2%;
  transform: rotate(7deg);
}
div:after {
  left: 49.2%;
  transform: rotate(-7deg);
}

<div></div>