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

Posted

技术标签:

【中文标题】响应式 div 全宽底部的中心三角形【英文标题】：Center triangle at bottom of div full width responsively 【发布时间】：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 的底部（此时我也在使用像素值）。 我既不知道如何响应地调整三角形的大小，也不知道如何在这样做时保持它的高度（我尝试了多个教程）。

非常感谢您的帮助。

【问题讨论】：

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

【讨论】：

以上是关于响应式 div 全宽底部的中心三角形的主要内容，如果未能解决你的问题，请参考以下文章

div全宽的响应式背景图像

在引导响应页面中如何使 div 居中

div上的全宽背景颜色

在响应式页脚菜单中添加“固定”div

具有浮动和全宽布局的响应式图像

如何在响应式表格中获得文本左对齐的全宽列