Question

我正在建立一个网站，我需要将页面分成3个或更多的“三角形”，并将信息居中。

我已经尝试过了：

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>

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

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>

将整页分割为div三角形和形状，然后将文本放入其中

1 个答案: