形状内的内容

Question

我想让我的页脚看起来像这样 Image。三角形内有 4 列。

然而，由于某种原因，似乎所有四列都堆叠在一起，我通过稍微更改上边距来确认这一点。当我注释掉 #right_triangle 时，我得到 4 列，如您所料。我相信它是实际三角形的边界，但我想不出一种方法来做或绕过它。

下面是我正在使用的代码。

#right_triangle {
  width: 0;
  height: 0;
  border-bottom: 300px solid #009933;
  border-right: 2000px solid transparent;
}
#footer_column1 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column2 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column3 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column4 {
  margin-top: 200px;
  width: 25%;
  float: left;
}

<div id="footer">
  <div id="right_triangle">
    <div id="footer_column1">Hello</div>
    <div id="footer_column2">Hello</div>
    <div id="footer_column3">Hello</div>
    <div id="footer_column4">Hello</div>
  </div>
</div>

Answer 1

原因：

您猜对了，问题出在 #right_triangle 上，但不是因为边框。这是因为此元素上的 width: 0 和 child #footer_column* 元素上的 width: 25%。可能你忽略了它（或者你可能没有完全理解这个概念）但是 child 元素上的百分比宽度将使用 parent 的设置宽度作为计算参考。因此，所有 child 个元素的 width 只不过是 0px。由于它们是浮动的，因此第二个和后续元素与其前一个兄弟元素的偏移量仅为前一个元素的宽度，并且它们的右侧也没有任何边距。因此，实际上它们都位于左侧的 0px 处（彼此重叠）。

同样，因为它们是浮动的，所以它们会保持在同一行中，除非它们的宽度超过一行的宽度。这里的宽度也不超过一条线的宽度（即parent的宽度）。如果您甚至将 width: 1px 设置为前三个元素中的任何一个，您会注意到其他元素被推到下一行。

解法：

考虑到您需要将屏幕的宽度平均分配到 4 列（从图像中看）并且不改变整体方法，您可以使用以下任何一种解决方案：

给所有 #footer_column* 元素，一个 width 以视口单位而不是百分比，设置 display: inline-block 而不是 float: left 并添加 white-space:nowrap 到 parent。所有这些将使它们显示在同一行 而无需更改您的标记 。

#right_triangle {
  width: 0;
  height: 0;
  white-space: nowrap;
  border-bottom: 300px solid #009933;
  border-right: 2000px solid transparent;
}
#footer_column1 {
  margin-top: 200px;
  width: 25vw;
  display: inline-block;
}
#footer_column2 {
  margin-top: 200px;
  width: 25vw;
  display: inline-block;
}
#footer_column3 {
  margin-top: 200px;
  width: 25vw;
  display: inline-block;
}
#footer_column4 {
  margin-top: 200px;
  width: 25vw;
  display: inline-block;
}

<div id="footer">
  <div id="right_triangle">
    <div id="footer_column1">Hello</div>
    <div id="footer_column2">Hello</div>
    <div id="footer_column3">Hello</div>
    <div id="footer_column4">Hello</div>
  </div>
</div>

将所有 4 个页脚列元素设为页脚元素的 children 而不是 #right_triangle。由于页脚是块元素，默认情况下它会获得 100% 的屏幕宽度，因此它会在 4 children 之间平均分配。请注意，对于此方法，您必须绝对定位 #right_triangle 并在其上使用 z-index: -1。

#footer {
  position: relative;
}
#right_triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 300px solid #009933;
  border-right: 2000px solid transparent;
  z-index: -1;
}
#footer_column1 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column2 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column3 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column4 {
  margin-top: 200px;
  width: 25%;
  float: left;
}

<div id="footer">
  <div id="right_triangle"></div>
  <div id="footer_column1">Hello</div>
  <div id="footer_column2">Hello</div>
  <div id="footer_column3">Hello</div>
  <div id="footer_column4">Hello</div>
</div>

备注：

在这个问题中使用 CSS transform 来实现三角形会很困难，因为它需要对 skew 和 rotate 进行特定的角度计算（取决于哪个一个被使用）因此不推荐。
渐变可能是这个的一个不错的选择，但不幸的是它们在非常高的维度上会变得粗糙和锯齿状边缘，因此不推荐使用。

如果你可以改变你的整体方法，我会推荐使用SVG创建三角形。并不是说 SVG 为这个特定的形状提供了任何巨大的优势，但通常开始学习和使用 SVG 形状更有用，因为它有助于轻松创建许多复杂的形状。下面是一个使用 SVG 的片段。

#footer {
  position: relative;
}
#right_triangle {
  position: absolute;
  width: 2000px;
  height: 300px;
  z-index: -1;
}
#right_triangle path {
  fill: green;
}
#footer_column1 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column2 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column3 {
  margin-top: 200px;
  width: 25%;
  float: left;
}
#footer_column4 {
  margin-top: 200px;
  width: 25%;
  float: left;
}

<div id="footer">
  <svg id="right_triangle" viewBox='0 0 2000 300'>
    <path d='M0,0 2000,300 0,300z' />
  </svg>
  <div id="footer_column1">Hello</div>
  <div id="footer_column2">Hello</div>
  <div id="footer_column3">Hello</div>
  <div id="footer_column4">Hello</div>
</div>

形状内的内容

Content Inside a Shape

css

css-shapes