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

Question

我需要写一个在页面底部有一个全 Angular 箭头的页面。因此，我使用以下 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%])重复出现，箭头是一个 250x183px 的矩形。

箭头需要占据整个页面，需要使用透明图片，所以这些解决方案立马就不行了。我想像 width: 100%-250px 这样的值是可以接受的，但 CSS 不支持这些恶作剧。

Answer 1

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

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

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