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

你只需要玩这些职位。 “箭头”实际上是一个框，具有透明的左，上，下边框，只留下正确的边框，因为它们相互连接的方式，有一个三角形。 Jsfiddle

Answer 2

我认为CssArrowPlease正是您所寻找的。

Answer 3

试试这个 - ＆gt; http://jsfiddle.net/5amvG/

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

<强> CSS：

#popup{
    overflow: visible;
    position: relative;
    border: 0;
    padding: 40px;
    height: 40px;
    width: 110px;
    color: #fff;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;      
}
#popup:before{
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

HTML：

<div id="popup">
    Sell yourself and say what makes you,you !
</div>

Answer 4

我想这可以帮到你：

纯CSS语音气泡： http://nicolasgallagher.com/pure-css-speech-bubbles/demo/