主页 / 问题 / 929118
Accepted
Даша Новикова
Asked:2020-01-07 04:36:07 +0000 UTC2020-01-07 04:36:07 +0000 UTC

如何布置一个朝下的三角形块？[复制]

  • 772

你能告诉我这样的积木是怎么做的吗？

在此处输入图像描述

html

2 个回答

  1. Best Answer

    你可以这样做（添加剩余的块，我认为这样不会有问题）：

    body {
  margin: 0;
  padding: 0;
}
.header {
  width: 100%;
  height: 300px;
  background: #0064d9;
  background-image: url(https://www.gokunming.com/en/blog/image/big/12025.jpg);
  display: flex;
  justify-content: center;
  align-items: center;
}
h3 {
  color:#f0f0f0; 
}
.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
.content-down {
  display: flex;
  flex-direction: row;
}
.triangle {
  width: 100%;
}
.left-block {
  width: 50%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.right-block {
  width: 50%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.main-content {
  background: #39cccc;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100%;
}
.left-triangle {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 100%;
}

.right-triangle {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  right: 0;
  bottom: 100%;
}
    <div class="header">
  <h3>WE CREATE DESIGN THAT YOU WILL LOVE</h3>
</div>
<div class="content">
  <div class="left-block">
    <div class="left-triangle">
      <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 500 85" preserveaspectratio="none">
        <polygon class="left" points="0,0   0,86   500.8,86   500.8,75.5" fill="#39cccc"></polygon>
      </svg>
    </div>
  </div>
  <div class="right-block">
    <div class="right-triangle">
      <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewbox="500 0 500 85" preserveaspectratio="none">
        <polygon class="right" points="1000,0   1000,86   500,86   500,75.5" fill="#39cccc"></polygon>
      </svg>
    </div>
  </div>
</div>
<div class="main-content"></div>

    • 6

  2. 这是另一个实现：

    如果您愿意，可以查看 Codepen：链接

    body {
  margin: 0;
  padding: 0;
}

.test {
  padding: 72px 0px 220px;
  position: relative;
  margin-bottom: 101px;
  background-color: #222222;
}

.test::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 50%;
  padding-top: 4%;
  background: #ffffff;
  -ms-transform: skew(0, 4.5deg) translate(0, 50%);
  -webkit-transform: skew(0, 4.5deg) translate(0, 50%);
  -moz-transform: skew(0, 4.5deg) translate(0, 50%);
  -o-transform: skew(0, 4.5deg) translate(0, 50%);
  transform: skew(0, 4.5deg) translate(0, 50%);
}

.test::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 50%;
  padding-top: 4%;
  background: #fff;
  -ms-transform: skew(0, -4.5deg) translate(0, 50%);
  -webkit-transform: skew(0, -4.5deg) translate(0, 50%);
  -moz-transform: skew(0, -4.5deg) translate(0, 50%);
  -o-transform: skew(0, -4.5deg) translate(0, 50%);
  transform: skew(0, -4.5deg) translate(0, 50%);
}
    <div class="test"></div>

    • 5

相关问题