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

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

从理论上讲，这应该有效——事实上，当我使用具有固定背景颜色的图像时，它确实有效。然而，我的客户要求它们是透明的，不幸的是，这揭示了我的黑客背后的丑陋真相——箭头的“轴”从箭头的头部向外窥视。我能做些什么呢？

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

箭头需要占据整个页面并且需要使用透明图片，所以这些解决方案马上就被淘汰了。我想类似的东西是width: 100%-250px可以接受的，但是 CSS 不支持这些恶作剧。

Answer 1

您已经在使用 position:absolute; width:100%因此，您可以设置leftand来代替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;
}