如何在CSS中創建動態寬度箭頭？

我需要編寫頁面底部有一個全寬度箭頭的頁面。因此，我用下面的HTML：如何在CSS中創建動態寬度箭頭？

<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中不支持這些僞裝。

來源

2012-10-30 Nekkoru

你需要跨瀏覽器支持，或者您也可以使用類似'盒大小：邊界盒; padding-right：250px;'在footer_left上？ –

您已經在使用position：absolute;所以不是width:100%，您可以設置left和right：

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

還有許多其他的解決方法，但對於您的特定情況下，我認爲這是最簡單的。

來源

2012-10-30 10:17:29 Giona

非常感謝！這工作很好:) – Nekkoru

方式更整潔的解決方案。同樣，確保「寬度」與「正確」相同。我的經驗表明，通過這兩種價值評論是好的做法。 –

我覺得這個方法可能會奏效：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; 
}

來源

2012-10-30 10:21:20

如何在CSS中創建動態寬度箭頭？

回答

相關問題