div 全宽底部的中心三角形响应

Question

经过数小时的尝试 CSS（抱歉，我仍然是 CSS 菜鸟）我向您寻求帮助：
我想要一个三角形作为 div 的 "bottom"，同时填充整个屏幕宽度，无论屏幕大小 (100%)。
当 window 调整大小时，我只希望三角形改变它的宽度，以便它仍然填充整个屏幕宽度 (100%) 但不是它的高度。
目前整个事情看起来像这样（黑色三角形仅用于演示目的），从外观来看这就是我想要实现的目标：

我的代码如下所示：

.top {
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  border-top: 40px solid black;
  border-left: 950px solid transparent;
  border-right: 950px solid transparent;
  width: 0;
  height: 0;
  top: 107px;
  content: "";
  display: block;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>

JSFiddle 上的代码：http://jsfiddle.net/L8372wcs/

我的问题：

我不知道如何让三角形占据屏幕尺寸的 100%（我现在使用的是像素宽度）。
我不知道如何让三角形准确地贴在 div 的底部（我现在也在使用像素值）。
我既不知道如何响应地调整三角形的大小，也不知道如何在这样做时保持它的高度（我试过几个教程）。

非常感谢您的帮助。

Answer 1

见http://jsfiddle.net/L8372wcs/1/

CSS（相关改动）

.top {
    ...
    position: relative;
}

.triangle {

    border-top: 40px solid black;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    ...
    bottom: -40px;
}

左右边框由视口单位定义（因为您的 div 是 100% 宽）。三角形是响应式的（尝试调整视口大小）
三角形位置用 bottom: -40px;（而不是顶部）定义，其父级有 position: relative; 这将确保三角形始终位于绿色元素下方（直到三角形的上边框 40px 高）

结果

Answer 2

您可以使用 vw 单位（视口宽度）。

Working example.

Answer 3

我不知道如何让三角形占据屏幕尺寸的 100%（我现在使用的是像素宽度）。

这可以通过使用 vw 作为创建三角形的边界的单位来完成。由于主体有一个 margin（Chrome 中的 8px），因此使用 calc(50vw - 8px) 来容纳它。

我不知道如何让三角形贴在 div 的确切底部（我现在也在使用像素值）。

相对于 .top 的位置 .triangle 通过将 position: relative; 添加到 .top 然后将 top: 100% 添加到 .triangle 以始终将其放置在.top.

底部

我既不知道如何响应地调整三角形的大小，也不知道如何在这样做时保持它的高度（我试过几个教程）。

vw 单元将使三角形响应。

.top {
  background-color: green;
  height: 100px;
  position: relative;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  border-left: calc(50vw - 8px) solid transparent;
  border-right: calc(50vw - 8px) solid transparent;
  border-top: 40px solid black;
  content: "";
  display: block;
  height: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
  width: 0;
}

<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>

Answer 4

这个合适吗？

*{
    padding: 0;
    margin: 0;
}
.top {
    background-color: green;
    height: 100px;
    width: 100%;
    position: relative;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    box-sizing: border-box;
    width: 0; 
    height: 0; 
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    position: absolute;
    top: 100px;
    border-top: 30px solid black;
}

Answer 5

另一种方法是对多边形元素使用 inline svg。

这样，它的宽度可以设置为 100%，高度可以通过 CSS thx preserveAspectRatio svg 属性独立控制。

在下面的示例中，三角形的高度固定为 40px，但您可以 通过删除 CSS 高度 [=] 根据宽度 调整高度属性和 preserveAspectRatio 属性。

.top {
    position:relative;
    background-color: green;
    height: 100px;
    width: 100%;
}
.bottom {
    background-color: red;
    height: 200px;
    width: 100%;
}
.triangle {
    position:absolute;
    top:100%;
    width:100%;
    height:40px;
}

<div class="top">
    <svg viewbox="0 0 100 10" preserveAspectRatio="none" class="triangle" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <polygon points="0 0 100 0 50 10"/>
    </svg>
</div>
<div class="bottom"></div>

您还可以使用 CSS 或 SVG 元素中的属性来设置三角形的样式（填充颜色、边框、不透明度...）。这是 CSS 的示例：

.top {
  position: relative;
  background-color: green;
  height: 100px;
  width: 100%;
}
.bottom {
  background-color: red;
  height: 200px;
  width: 100%;
}
.triangle {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 40px;
  fill: gold;
}

<div class="top">
  <svg class="triangle" viewbox="0 0 100 10" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <polygon points="0 0 100 0 50 10" />
  </svg>
</div>
<div class="bottom"></div>

Answer 6

三角形也可以用linear-gradient:

创建

.top {
  background-color: green;
  height: 100px;
  position: relative;
}
.triangle {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 40px;
  background:
    linear-gradient(to bottom left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%) no-repeat left top / 50% 100%,
    linear-gradient(to bottom right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%) no-repeat right top / 50% 100%;
}
.bottom {
  background-color: red;
  height: 200px;
}

<div class="top">
  <div class="triangle"></div>
</div>
<div class="bottom"></div>

Chrome 没有产生流畅的结果，但希望将来能解决这个问题。

div 全宽底部的中心三角形响应

Center triangle at bottom of div full width responsively

html

css

svg

responsive-design

css-shapes