将小三角形水平居中在 div 底部并按响应和比例调整大小

使用 CSS，我试图实现以下响应屏幕大小调整的效果（用于响应式设计）。具体来说，我希望随着浏览器窗口变小，三角形也按比例变小。我将其模拟为 PNG（不是 HTML/CSS）：

到目前为止，我使用此代码作为基础，其中 2 个 div 堆叠在一起：

CSS:

.pinkbox {
    background-color: #FF8290;
    width: 100%;
    height: 100px;
}

.greenbox {
    background-color: #85D782;
    width: 100%;
    height: 100px;
}

HTML:

<div class="pinkbox"></div>
<div class="greenbox"></div>

使用纯 CSS 且无需媒体查询的响应式三角形。

看到这个代码下载文章

FIDDLE

调整窗口大小并观察三角形响应地调整大小！

Markup

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

CSS

.top
{
    background: pink;
    height: 100px;
    position: relative;
}

.bottom
{
    background: lightGreen;
    height: 100px;
}
.triangle-down{
    width: 2.5%;
    height: 0;
    padding-left:2.5%;
    padding-top: 2.5%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;  /* center the arrow */
    margin:auto;  /* center the arrow */
    top: 100px; /* height of top section */
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-50px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid pink;
}

它到底是如何运作的？

好吧，首先我们需要决定两件事：

1) 三角形的宽/高比。在上面的示例中（为了简单起见）我使用了 2:1 的比率。

2）我们希望三角形占据多少容器/视口宽度。在上面的示例中，我使用了视口宽度 5% 的三角形：（宽度 2.5% + padding-left:2.5%；）

现在根据以下规则设置其他属性/比例：（来自上面的文章）

1) (左内边距 + 宽度)/上内边距 = (左边框 + 右边框)/上边框 = 底部/高度

2) 左边距 = -左边框 = -右边框

3) 顶部边距 = -顶部边框

4) 宽度=左内边距

自定义响应式三角形：

假设您想要一个比例为 3:1 的三角形，并且它占据宽度的 6%。

没问题！

另一把小提琴（这个其实看起来更像图片）

将 CSS 修改为：

.triangle-down{
    width: 3%;
    height: 0;
    padding-left:3%;
    padding-top: 2%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-33px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 33px solid pink;
}

Enjoy!