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

【问题标题】：Center triangle at bottom of div full width responsively响应式 div 全宽底部的中心三角形
【发布时间】：2015-09-23 09:32:15
【问题描述】：

经过几个小时的 CSS 尝试（抱歉，我仍然是 CSS 菜鸟），我向您寻求帮助：
我希望三角形成为 div 的“底部”，同时填充整个屏幕宽度，无论屏幕尺寸是多少 (100%)。
当窗口调整大小时，我只想让三角形改变它的宽度，以便它仍然填充整个屏幕宽度 (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 的底部（此时我也在使用像素值）。
我既不知道如何响应地调整三角形的大小，也不知道如何在这样做时保持它的高度（我尝试了多个教程）。

非常感谢您的帮助。

【问题讨论】：

标签： html css svg responsive-design css-shapes

【解决方案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 高）

结果

【讨论】：

vw 方法存在一个问题：当内容足够高时可以垂直滚动条，水平滚动条也会出现
好点，但不幸的是不能用%单位设置边框。我会考虑的
使用overflow:hidden; 可以解决问题，但三角形会在侧面略微切割
抱歉回复晚了，我正在度假。非常感谢您提供的出色解决方案和您为此付出的努力（也感谢所有其他人）！

【解决方案2】：

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

Working example.

【讨论】：

【解决方案3】：

我不知道如何让三角形占据屏幕大小的 100%（我目前使用的是像素宽度）。

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

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

通过将position: relative; 添加到.top 然后将top: 100% 添加到.triangle 将.triangle 相对于.top 定位，以始终将其放置在.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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案5】：

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

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

在以下示例中，三角形的高度固定为 40 像素，但您可以通过移除 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>

【讨论】：

【解决方案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 不会产生流畅的结果，但希望将来会解决此问题。

【讨论】：