html - 将网站拆分为 3 个响应式三 Angular 形

Question

嘿，我正在寻找一种解决方案，将我网站的首页拆分为 3 个响应式三 Angular 形。所有这些三 Angular 形内部都应该有一个图像和一些文本，但效果不是很好......

所有准备就绪的人都尝试使用“边界”或“转换”。还使用“vw”和“vh”代替百分比。

第一个“主”三 Angular 形的 CSS:

.triangle {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.triangle:before {
  background-size: cover;
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    background-image: url("http://lorempixel.com/output/city-q-g-1920-1080-10.jpg");
    transform: rotate(-45deg);
    transform-origin:0 0;

}

三 Angular 形也应该得到显示分辨率和高度的整个宽度。

Answer 1

* {
  box-sizing: border-box;
}

div {
  display: inline-block;
  vertical-align: top;
  border: .5vw solid black;
  text-align: center;
  padding: .2vw;
  width: 33%;
  color: white;
  margin: 0;
}

#left {
  background-color: green;

}

#middle {
  background-color: orange;
}

#right {
  position: absolute;
  right: .2vw;
  background-color: blue;
}

Please see this Fiddle