形状灵敏的容器 [英] Responsive containers with shapes

问题描述

我正在尝试创建以下布局: LINK

I am trying to create this layout: LINK

我需要创建3个容器，每个容器都会有一个图像作为背景.尝试使用SVG进行此操作，但这不是一个选择，因为将来图像将通过CMS进行更改，因此我需要一个可以填充图像的形状.还尝试使用边框，因此我可以创建形状，但它也无法像上图所示那样工作.有没有更简单的方法来实现这一目标?假设使用引导类?

I need to create 3 containers and each container will have an image as a background. Tried to do it with SVG, but it's not an option, because in future images will be changed via CMS, so I need a shape, that images can fill in. Also tried to play with the border, so I can create a shape, but it's also not working the way it looks on the image above. Is there an easier way to achieve this? Let's say using bootstrap classes?

推荐答案

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

You may use flex, transform and pseudo to hold backgrounds: /* 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>

这篇关于形状灵敏的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！