css - 背景图像溢出

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