时间戳

首页 > 解决方案 > 将整页拆分为 div 三角形和形状并将文本放入其中

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

问题描述

我正在制作一个网站，我需要将页面拆分为 3 个或更多“三角形”并将信息集中在其中。

我试过这个：

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>

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

标签： htmlcss

解决方案

您可以轻松地做到这一点，考虑一个背景层，然后将文本放置在您想要的位置：

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>

推荐阅读