底部居中三角形div自适应全宽

Question

经过几个小时尝试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/

我的问题：

• 我不知道如何使三角形占据整个屏幕大小（目前我正在使用像素宽度）。
• 我不知道如何使三角形粘在div的底部（这里我也在使用像素值）。
• 我既无法弄清楚如何响应式调整三角形的大小，也无法在此过程中保持其高度（我尝试了几个教程）。

非常感谢您提前的帮助。

- lx4r

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;
}

1. 左右边框使用视口单位定义（因为div宽度为100%）。三角形是响应式的（尝试调整视口大小）。

2. 三角形位置使用bottom: -40px;定义（而不是top），且其父元素有position: relative;。这将确保三角形始终位于绿色元素下方（直到三角形的顶部边框高度达到40px为止）。

---

结果

- Fabrizio Calderan

---

vw 方法存在一个问题：当内容高度足够出现垂直滚动条时，水平滚动条也会出现。 - web-tiki

好的观点，但不幸的是边框无法使用“%”单位设置。我会考虑这个问题。 - Fabrizio Calderan

使用 overflow:hidden; 可以解决问题，但三角形的一侧会被略微切断。 - web-tiki

抱歉回复晚了，我在度假期间。 非常感谢您提供的出色解决方案和付出的努力（也感谢其他人！） - lx4r

Answer 2

另一种方法是使用带有多边形元素的内联SVG。

这样，它的宽度可以设置为100％，并且由于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>

- web-tiki

Answer 3

你可以使用vw单位（视口宽度）。 查看演示实例。

- TechWisdom

Answer 4

我无法弄清如何使三角形占据整个屏幕大小（目前我正在使用像素宽度）。

可以通过将的单位设置为vw来创建三角形。由于有一个margin（在Chrome中为8px），因此请使用calc（50vw-8px）来适应它。

我无法弄清如何将三角形粘贴到

的正下方（这里我也使用了像素值）。

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

- Hidden Hobbes

Answer 5

三角形也可以用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目前还不能产生流畅的结果，但预计将在未来得到解决。

- Salman A

Answer 6

这符合要求吗？

*{
    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;
}

- galki