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

Question

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

Answer 1

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

请参阅此codeitdown article

的 FIDDLE

调整窗口大小并反复观看三角形调整大小！

标记

<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％+填充左：2.5％;）

现在根据以下规则设置其他属性/比例:(来自上文）

  

1）（padding-left + width）/ padding-top =（border-left +   border-right）/ border-top = base / height

     

2）margin-left = -border-left = -border-right

     

3）margin-top = -border-top

     

4）width = padding-left

自定义响应三角形：

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

没问题！

ANOTHER FIDDLE （这个看起来更像是图片）

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

享受！

Answer 2

不可能有一个响应宽度的css三角形。如果使用背景图像来创建三角形，则可以使用。

以下是具有固定宽度的css三角形的代码：

<强> CSS

.pinkbox {
    background-color: #FF8290;
    width: 100%;
    height: 100px;
    position: relative;
}
.pinkbox:after {
    content: " ";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #FF8290 transparent transparent transparent;
}
.greenbox {
    background-color: #85D782;
    width: 100%;
    height: 100px;
}

<强> Demo

您可以添加一些媒体查询来更改某些屏幕宽度的三角形，如下所示：

<强> CSS

.pinkbox:after {
    content: " ";
    position: absolute;
    left: 50%;
    bottom: -20px;
    margin-left: -40px;
    border-style: solid;
    border-width: 20px 40px 0;
    border-color: #FF8290 transparent transparent transparent;
}
@media (max-width:640px) {
    .pinkbox:after {
        margin-left: -30px;
        border-width: 20px 30px 0;
    }
}
@media (max-width:480px) {
    .pinkbox:after {
        bottom: -15px;
        margin-left: -20px;
        border-width: 15px 20px 0;
    }
}

<强> Demo

或者你可以添加一些jQuery来改变窗口调整大小的三角形的宽度：

<强>的Javascript

$(window).on('resize', function () {
    arrowWidth = $(this).width() / 20;
    $('.pinkbox .arrow').css({'margin-left' : - arrowWidth, 'border-width' : '20px ' + arrowWidth + 'px 0'});
}).trigger('resize');

<强> Demo

Answer 3

您当然可以使用@media css

根据窗口宽度更改css三角形的大小

@media (max-width:960px) {

.pinkbox:after {
    content: " ";
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #FF8290 transparent transparent transparent;
    }

}

@media (max-width:700px) {

.pinkbox:after {
    content: " ";
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -15px;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #FF8290 transparent transparent transparent;
    }

}

@media (max-width:500px) {

.pinkbox:after {
    content: " ";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #FF8290 transparent transparent transparent;
    }

}

Answer 4

无响应，但对中心100％准确。

http://jsfiddle.net/SinisterSystems/Z8v97/1/

<div class="pinkbox">

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

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

编辑 - 致力于响应式解决方案。请等一下。