Horizontally center small triangle at bottom of div and resize responsively and proportionately

问题

With CSS I am trying to accomplish the following effect that responds to screen resizing (for responsive design). Specifically I want the triangle to get proportionately smaller as the browser window gets smaller. I have mocked this up as a PNG (It's not HTML/CSS):

So far I am using this code as a base, with 2 divs stack on top of one another:

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>

回答1:

Responsive triangles with PURE CSS and without media queries.

See this codeitdown article

FIDDLE

Resize the window and watch the triangle resize responsively !

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

How the heck does it work?

Well, firstly we need to decide two things:

1) The width/height ratio of the triangle. In the above example (and for simplicity) I used a ratio of 2:1.

2) How much of the container/viewport width we want our triangle to take up. In the above example I used a triangle of 5% of the viewport width: (width 2.5% + padding-left:2.5%;)

Now set up the other properties /proportions according to the following rules: (from above article)

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

Customizing the responsive triangle:

Let's say you wanted a triangle of ratio 3:1 and for it to take up 6% of the width..

No problem!

ANOTHER FIDDLE (This one actually looks more like the picture)

Modify CSS to this:

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

回答2:

You can certainly change the size of a css triangle based on window width with @media 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;
    }

}

回答3:

It is not possible to have a css triangle with a responsive width. It is possible if you use a background image to create the triangle.

Here is code for a css triangle with a fixed width:

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

You could add some media queries to change the triangle at certain screen widths like this:

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

Or you could add some jQuery to change the width of the triangle on window resize:

Javascript

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

Demo

回答4:

Non Responsive, but 100% accurate on center.

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

<div class="pinkbox">

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

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

EDIT - Working on responsive solution. One moment please.

来源：https://stackoverflow.com/questions/21176948/horizontally-center-small-triangle-at-bottom-of-div-and-resize-responsively-and

标签

css

responsive-design