Question

我需要编写一个页面底部有一个全角箭头的页面。因此，我使用以下HTML：

<div id="footer_wrap">
    <div id="footer_left"></div>
    <div id="footer_right"></div>
</div>

相关的CSS是：

#footer_wrap{
width: 100%;
}

#footer_left{
background: url('../img/arrow_bg1.png') repeat-x;
width: 100%;
height: 183px;
position: absolute;
left: 0;
}

#footer_right{
display: inline-block;
background: url('../img/arrow_bg2.png') no-repeat;
width: 250px;
height: 183px;
position: absolute;
right: 0;
}

理论上，当我使用具有固定背景颜色的图像时，这应该有效 - 事实上，确实如此。然而，我的客户要求他们保持透明，不幸的是，这显示了我黑客背后的丑陋真相 - 箭头的“轴”从箭头头部偷看。我该怎么办呢？

包含箭头的图像是1x183px“轴”纹理，在箭头的整个长度（或者，在这种情况下，整个页面[width: 100%]）重复，箭头是250x183px矩形。

箭头需要占用整个页面，并且需要使用透明图像，因此这些解决方案会立即显示在窗口之外。我想像width: 100%-250px这样的东西是可以接受的，但CSS中不支持这些恶作剧。

Answer 1

你已经在使用position：absolute;因此，您可以设置width:100%和left：

，而不是right

#footer_left{
position: absolute;
left: 0;
right:250px;
/* etc */
}

还有许多其他解决方法，但对于您的具体情况，我认为这是最简单的。

Answer 2

我认为这种方法可行：http://jsfiddle.net/27p4e/

<div class="footer">
 <div class="footer-left">left</div>
 <div class="footer-right">right</div>
</div>

.footer {
width:100%;
height:183px;
overflow:auto;
background:#ccc;
display:table;
}

.footer-left {
display:table-cell;
background:red;
height:183px;
}
.footer-right {
display:table-cell;
width:250px;
height:183px;
background:blue;
}

如何在CSS中创建动态宽度箭头？

2 个答案: