Question

以下是我的jsfiddle，其中我试图在底部边框上放置箭头图像，但是我无法做到这一点。请告诉我如何将箭头图像放在中心对齐，无论盒子的宽度是多少还是高度？感谢

.bubble 
{
    position: relative;
    width: 100px;
    height: 50px;
    padding: 0px;
    background: #FFFFFF;
    border: #000 solid 1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.arrow:before 
{
    content: "";
    position: absolute;
    left: 50%;
    border-style: solid;
    border-width: 26px 26px 0;
    border-color: #000 transparent;
    display: block;
    width: 0;
    background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
    z-index: 0;
}

Answer 1

试试这个。我添加了一些更改检查，

.bubble 
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.arrow:before 
{
content: "";
position: absolute;
left: 50%;
    bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
    margin:0 0 0 -26px;
}

Answer 2

替换.arrow：之前的风格＆amp;试试吧。它将箭头对准中心底部。

.arrow:before 
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}

将箭头图像放在底部边框上

2 个答案: