Question

我正在尝试创建此布局： LINK

我需要创建3个容器，每个容器都有一个图像作为背景。尝试用SVG做，但它不是一个选项，因为将来图像将通过CMS更改，所以我需要一个形状，图像可以填写。还试图玩边框，所以我可以创建一个形状，但它也没有像上面的图像那样工作。有没有更简单的方法来实现这一目标？假设使用bootstrap类？

Answer 1

您可以通过两种方式实现：1）使用引导类2）使用@media并根据您可以使用的div大小显示正确的图像.className {background-size：contains; background-repeat：no-repeat} < / p>

Answer 2

您可以使用flex，transform和pseudo来保存背景： / * http://codepen.io/gc-nomade/pen/vGvRPZ * /

html,
body {
  height: 100%;
  width:100%;
  margin: 0;
  overflow: hidden;
}
body > div {
  position:relative;
  min-height: 100%;
  width:100%;
  display: flex;
  width: 160%;
  margin: 0;
  margin-left: -30%;
}
div div {
  display: flex;
  align-items: center;
  transform: skew(-30deg);
  overflow: hidden;
  border-left: solid;
  flex: 4;
  position: relative;
}
div div h2 {
  font-size: 5vw;
  color: turquoise;
  text-shadow: 0 0 1px black;
  position: relative;
  text-align: center;
  width: 100%;
  transform: skew(30deg);
}
div div:nth-child(1) h2 {
  padding-left: 50%;
}
div div:nth-child(3) h2 {
  padding-right: 50%;
}
div div:before {
  transform: skew(30deg);
  content: '';
  top: 0;
  bottom: 0;
  right: -50%;
  left: -50%;
  position: absolute;
  background: url(http://hd.wallpaperswide.com/thumbs/grungy_background-t2.jpg ) center tomato;
  background-size: 100vw auto;
}
div div:nth-child(2):before {
  background: url(http://www.intrawallpaper.com/static/images/desktop-backgrounds-8656-8993-hd-wallpapers_js7gwWA.jpg) center right gray;
  background-size: 100vw auto;
}
div div:nth-child(3):before {
  background: url(https://wallpaperscraft.com/image/dark_background_colorful_paint_47176_300x188.jpg) center right turquoise;
  background-size: 100vw auto;
}
div div:nth-child(2) {
  flex: 2.5;
}

<div>
  <div>
    <h2>title 1</h2>
  </div>
  <div>
    <h2>title 1</h2>
  </div>
  <div>
    <h2>title 1</h2>
  </div>
</div>

有形状的敏感容器

2 个答案: