Question

尝试执行以下操作：

ul {
    background-color: white;
    border-radius: 5px 5px 5px 5px;
    display: block;
    margin-top: 16px;
    padding: 10px;
    position: absolute;
    top: 25px;
    z-index: 1000;
    background-image: url(arrow.png);
    background-position: -10px -10px;
}

<ul>
<li>1</li>
<li>2</li>
</ul>

现在我的问题是我无法从圆形白框中突出箭头。像工具提示之类的东西。我不想使用额外的div或其他元素。有可能吗？

Answer 1

我所管理的最好的是：

ul 
{
    display: block;
    margin-top: 16px;
    padding-left: 10px; /* pad for size of arrow image */
    position: absolute;
    top: 25px;
    z-index: 1000;
    background:url("arrow.png") no-repeat top left;
}

ul li
{
    margin:0; padding:0;
    list-style-type:none;
    background-color:white;
    width:60px; /* fiddle with sizing for box */
}

ul li:first-child
{
    border-radius: 0px 5px 0px 0px;
}

ul li:last-child
{
    border-radius: 0px 0px 5px 5px;
}

Answer 2

你可以使用javascript来实现这一点，使用jQuery'wrap'可能最容易实现这一点，以便在你的li标签周围添加额外的div，然后你就可以使用css设置样式了。

背景图像溢出

2 个答案: