div 全宽底部的中心三角形响应 [英] Center triangle at bottom of div full width responsively

问题描述

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

我的代码如下:

.top {背景颜色:绿色；高度:100px；宽度:100%；}.底部 {背景颜色:红色；高度:200px；宽度:100%；}.三角形 {边框顶部:40px纯黑色；左边框:950px 实心透明；border-right: 950px 实心透明；宽度:0；高度:0；顶部:107px；内容: "";显示:块；位置:绝对；溢出:隐藏；左:0；右:0；保证金:自动；}

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

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

我的问题:

• 我不知道如何让三角形占据屏幕尺寸的 100%(我目前使用的是像素宽度).
• 我不知道如何让三角形贴在 div 的确切底部(此时我也在使用像素值).
• 我既不知道如何以响应方式调整三角形的大小，也不知道如何在这样做时保持其高度(我尝试了一些教程).

非常感谢您的帮助.

解决方案

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

<小时>

CSS(相关变化)

.top {...位置:相对；}.三角形 {边框顶部:40px纯黑色；左边框:50vw 实心透明；右边框:50vw 实心透明；...底部:-40px；}

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

2. 三角形的位置是用bottom: -40px;(而不是top)定义的，它的父元素有position:relative; 这将确保三角形将始终位于绿色元素的正下方(直到三角形的顶部边框 40px 高)

<小时>

结果

After hours of trying in CSS (sorry, I'm still a CSS noob) I am asking you for help:
I want a triangle to be the "bottom" of a div while filling the whole screen width, no matter what size the screen is (100%).
When the window resizes I just want the triangle to change it's width so that it still fills the whole screen width (100%) but not it's height.
At the moment the whole thing looks like this (triangle colored black only for demonstration purposes) which judging by the looks is what I want to achieve:

My code looks like this:

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

Code on JSFiddle: http://jsfiddle.net/L8372wcs/

My problems:

• I can't figure out how to make the triangle take 100% of the screen size (I'm using a width in pixels at the moment).
• I can't figure out how to make the triangle stick to the exact bottom of the div (here I'm also using a pixel value at the moment).
• I can neither figure out how to resize the triangle responsively nor how to maintain it's height while doing so (I tried serveral tutorials).

Thanks a lot in advance for the help.

解决方案

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

---

CSS (Relevant changes)

.top {
    ...
    position: relative;
}

.triangle {

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

1. The left and right borders are defined with viewport units (since your div is 100% wide). The triangle is responsive (try to resize the viewport)

2. The triangle position is defined with bottom: -40px; (instead of top) and its parent has position: relative; This will ensure that the triangle will be positioned always just below the green element (until the top border of the triangle is 40px tall)

---

Result

这篇关于div 全宽底部的中心三角形响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！