CODEWITHSUNDEEP
css
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3083

Make a CSS generated triangle appearing at the bottom of the div half the size

I am having a very hard time understanding what I have to change in order to impact the size of this CSS triangle (as originally defined on this stackoverflow entry). I am looking for the same effect but about 50% smaller triangle.

I noticed in the referenced stackoverflow post @DanielD noted the following:

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

But when I try to follow this I get completely muddled.

This is the current code I have:

Fiddle

HTML:

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

Upvotes: 0

Views: 908

Answers (2)

Craighead
Craighead

Reputation: 519

If you change: padding-left:1.5%; padding-top: 1%; within the triangle-down it should change the size to half of what you originally had.

Updated Fiddle to also change width: 1.5%;

I hope this is what you were looking for.

Upvotes: 1

Zach Saucier
Zach Saucier

Reputation: 26024

Try this

Since the triangle is made solely of borders, you have to affect each of the borders of the :after elements. Then you have to compensate for the change in size by changing the margin-top and margin-left values

.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-25px;
    margin-top:-25px;

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

Upvotes: 1

Related Questions