左css三角形的问题

Question

我正在尝试制作一个基本的工具提示，但我从css三角形中得到了这个奇怪的结果。 的 main.html中

<div class="max"></div>

的main.css

.max{
    width: 160px;
    height: 120px;
    padding: 5px;
    background: #da6262;
}
.max::before{
    border-style: solid;
    border-width: 15px 15px 15px 0px;
    border-color: transparent #fff;
    content: "";
    position: relative;
}

结果是

Answer 1

我不确定您想要放置箭头的位置，但请尝试将::before属性更改为position: absolute。通过这样做，您可以从文档的正常流程中取出::before（您的箭头），这样就不会受到元素的尺寸/填充的限制。

如果您希望相对于.max元素定位箭头，请将position: relative设置为它。 absolute属性相对于其第一个非静态元素的位置，在本例中为.max元素。

JSFiddle

祝你好运！