关于用css边框制作三角形的问题

Question

我只是用这段代码在css中制作一个箭头：

        .icon{
            height: 0;
            width: 0;
            border: solid transparent;
            border-width: 10px;
            border-left-color: aquamarine;
            border-top-color: saddlebrown;
            border-right-color: salmon;
            border-bottom-color: steelblue;
        }

<div class="icon"></div>

正确的三角形：

，结果是4个正确的三角形 但是当我在其他地方使用相同的代码时，结果看起来如下图，分区框的宽度和高度不一样。

错误的三角形：

Answer 1

你应该Positions使用width和height工作......

Answer 2

试试这个速记代码。 只需根据您的喜好更改边框的颜色/样式/宽度。

    .icon{
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

Answer 3

删除您在别处设置的填充

.icon{
    ...
    padding: 0;
    ...
}