CSS - 为工具提示容器设置样式

Question

我有一个用作工具提示容器背景的背景图片。图像如下所示：

它的用法如下：

.tooltip {
    display:none;
    background:url(images/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
}

<div class="tooltip">Tolltip text goes here</div>

但是，所有工具提示都没有相同数量的文本，因此我需要一种方法根据文本量使容器变大或变小。我该怎么做？滑动门技术是否允许水平和垂直尺寸调整？怎么样？

另外，如果我使用滑门技术，我可以使用相同的对角线渐变吗？如果没有，还有其他选择吗？

Answer 1

更新这可以使用纯CSS完成。 Example

好问题。现在，看起来你的投影是PNG图像的一部分，并且如你所知，它不可调整大小。您可以使用CSS3阴影，它将适应容器的大小。问题是，你只能将这些阴影添加到文本或框（不是箭头！）。

我认为你最好的选择是使用CSS3在框中添加一个投影，并且PNG图像只是箭头，有点像这样：

可能需要稍微调整才能使其完美对齐，但它会允许框根据内容调整大小。

.tooltip {
    display:none;
    padding:40px 30px 10px 30px;
    font-size:11px;
    color:#fff;

    position: relative;
    background: #000;

    /* rounded corners */
    -webkit-border-radius: 2px; 
       -moz-border-radius: 2px; 
            border-radius: 2px;

    /* box shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
       -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
            box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

    /* background gradient, see http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.08, rgb(0,0,0)),
        color-stop(0.57, rgb(48,48,48))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(0,0,0) 8%,
        rgb(48,48,48) 57%
    );
}

.tooltip_arrow {
    position: absolute;
    bottom: -37px; /* 37px is the height of the black_arrow.png */
    left: 45%; /* roughly centered... you can decide how to best do this */
}

<div class="tooltip">
    Tolltip text goes here
    <img src="images/black_arrow.png" class="tooltip_arrow" />
</div>

我没有对此进行测试，但我希望它有一个良好的开端。

Answer 2

尝试CSS箭头：http://cssarrowplease.com/