Question

我很难理解为了影响这个CSS三角形的大小（最初在this stackoverflow entry上定义），我必须改变什么。我正在寻找相同的效果，但三角形减小了约50％。

我在引用的stackoverflow帖子中注意到@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

但是当我试着遵循这个时，我就完全糊涂了。

这是我目前的代码：

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

Answer 1

Try this

由于三角形仅由边框组成，因此必须影响:after元素的每个边框。然后，您必须通过更改margin-top和margin-left值

来弥补尺寸的变化

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

Answer 2

如果您在三角形内更改：padding-left:1.5%; padding-top: 1%;，则应将大小更改为原来的大小的一半。

Updated Fiddle也要更改width: 1.5%;

我希望这就是你要找的东西。

使一个CSS生成的三角形出现在div底部的一半大小

2 个答案: