使CSS生成的三角形出现在div底部一半的大小 [英] Make a CSS generated triangle appearing at the bottom of the div half the size

问题描述

我有一个很难理解我必须改变，以影响这个CSS三角形的大小（最初定义在这个栈溢出条目）。我在寻找相同的效果，但大约50％的小三角形。

我注意到在引用stackoverflow post @DanielD注意到以下：

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

跟着我，我得到完全混乱。

这是目前的程式码：

小提琴

HTML：

 < div class =top> 
< div class =triangular-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; 
} 
  

解决方案

如果更改： padding-left：1.5％;
padding-top：1％; 在三角形下方，它应该将大小更改为原来的一半。

更新小提琴也可更改 width：1.5％;

我希望这是您要找的。

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

解决方案

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.

这篇关于使CSS生成的三角形出现在div底部一半的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！