css 修改三角形大小,使CSS生成的三角形出现在div底部一半的大小

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:

HTML:

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;

}

解决方案

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.