Question

在CSS中尝试了几个小时（对不起，我还是一名CSS菜鸟）我正在向你寻求帮助：
我想要一个三角形作为div的“底部”，同时填满整个屏幕宽度，无论屏幕尺寸是多少（100％）。
当窗口调整大小时，我只想让三角形改变它的宽度，使其仍然填满整个屏幕宽度（100％）但不是它的高度。
目前，整个事情看起来像这样（三角形的黑色仅用于演示目的），从外观来看，这是我想要实现的目标：

enter image description here

我的代码如下所示：

.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高）

<强>结果

enter image description here

Answer 2

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

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

在下面的示例中，三角形的高度固定为40px，但您可以通过删除CSS height属性和preserveAspectRatio属性来根据宽度重新设置高度。< / p>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Working example

Answer 4

我无法弄清楚如何让三角形占据屏幕尺寸的100％（我现在使用的是像素宽度）。

这可以通过使用vw作为创建三角形边框的单位来完成。由于正文中有margin（Chrome中为8px），请使用calc(50vw - 8px)来容纳它。

我无法弄清楚如何让三角形贴在div的确切底部（此时我还使用像素值）。

将.triangle添加到.top，将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; }单位会使三角形响应。

＆＃13;

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

＆＃13;

c:/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rails_admin-0.6.8/app/views/rails_admin/main/export.html.haml where line #51 raised:

＆＃13;

Answer 5

也可以使用linear-gradient：

创建三角形

＆＃13;

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

＆＃13;

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

＆＃13;

Chrome不会产生平滑的结果，但预计将来会修复此问题。

Answer 6

这适合吗？

users = db.users.find({'_id'> last_id}). limit(50)

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

6 个答案: