Question

在遵循此tutorial时，声称这段代码画了一个箭头，但从未正确解释过。

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

<div class="tooltip">Sample text</div>

任何人都可以解释它是如何做到的吗？

Answer 1

诀窍是边框的颜色和宽度。想象一个高度和宽度为零的盒子，只有边框，这些边框在正中心相交。如果您使用颜色绘制一个边框（在这种情况下为＃333）并将其余边框保持为透明，则会出现箭头。

该技术在CSS技巧上进一步解释：https://css-tricks.com/snippets/css/css-triangle/#article-header-id-2

这个CSS代码段如何绘制箭头？

1 个答案: