html - Div框样式

Question

一段时间以来，我一直在围绕 div 使用 css，但仍然找不到复制下面图片的方法。

任何人都可以提供帮助会很棒。它应该是 div 或我可以在其中放入文本的东西。

Answer 1

有点棘手，但可以用纯 CSS 实现。

HTML:

<span class="hover-me">Mouse goes here</span>
<div class="tooltip">
    <div class="tooltip-origin-border">
        <div class="tooltip-origin-inner">
        </div>
    </div>
    <div class="tooltip-content">
        This is a tooltip.
    </div>
</div>

CSS:

.tooltip {
    position: absolute;
    margin-top: -30px;
    margin-left: 120px;
    display: none;
}
.tooltip-content {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #33c;
    background: #ddf;
}
.tooltip-origin-border {
    border: 10px solid transparent;
    border-right-color: #33c;
    margin-top: 10px;
    margin-left: -19px;
    position: absolute;
}

.tooltip-origin-inner {
    border: 8px solid transparent;
    border-right-color: #ddf;
    margin-top: -8px;
    margin-left: -6px;
    position: absolute;
}
.hover-me {
    cursor: pointer;
}
.hover-me:hover + .tooltip {
    display: block;
}

您只需要玩转位置。 “箭头”实际上是一个盒子，左边框、上边框和底边框是透明的，只有右边的边框可见，并且由于它们相互连接的方式，所以呈现三 Angular 形。 Jsfiddle