html - 将整页拆分为 div 三 Angular 形和形状并将文本放入其中

Question

我正在制作一个网站，我需要将页面分成 3 个或更多“三 Angular 形”并将信息居中放置。

我试过这个:

https://codepen.io/anon/pen/YBZOoy

CSS:

    * {
        margin: 0;
        padding: 0;
        }
.clipboard{
  -webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #d3d0c9;
    background-size: cover;
    background-position: center center;
}
.clipboard1 {
    -webkit-clip-path: polygon(0 0, 50% 50%, 20% 100%, 0 100%);
    clip-path: polygon(0 0, 50% 50%, 20% 100%, 0 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: red;
    background-size: cover;
    background-position: center center;
}

HTML

<div class="clipboard">

</div>

<div class="clipboard1">
    <div class="text">
  <h1>testasdd</h1>
    </div>

我想在每个“三 Angular 形”中包含信息。文本应根据形状进行格式化。

Answer 1

你可以很容易地做到这一点，考虑一个背景层，然后把文本放在你想要的地方:

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to bottom left ,transparent 49.5%,red 50%),
    linear-gradient(to bottom right,transparent 49.5%,#ccc 50%);
}
.first {
  font-size:30px;
  text-align:center;
}
.second,
.third{
  display:inline-block;
  width:50%;
  text-align:center;
  line-height:80vh;
  font-size:30px;
}

<div class="first">
  some text
</div>
<div class="second">
  some text
</div><div class="third">
  some text
</div>

您也可以尝试如下:

body {
  margin:0;
  height:100vh;
  background:
  linear-gradient(to bottom left,transparent 49.5%,blue 50%) right bottom/50.1% 50.1%,
    linear-gradient(to bottom right,transparent 49.5%,blue 50%) left bottom/50.1% 50.1%,
    linear-gradient(to bottom left ,transparent 49.5%,red 50%),
    linear-gradient(to bottom right,transparent 49.5%,#ccc 50%);
  background-repeat:no-repeat;
}
.first,
.fourth{
  font-size:30px;
  text-align:center;
}
.second,
.third{
  display:inline-block;
  width:50%;
  text-align:center;
  line-height:80vh;
  font-size:30px;
}

<div class="first">
  some text
</div>
<div class="second">
  some text
</div><div class="third">
  some text
</div>
<div class="fourth">
  some text
</div>