div背景不規則，具有響應式布局

Question

我有以下圖像：

http://i47.tinypic.com/219zkl.png

這需要成為Foundation框架中.four-columns div的背景。 div標題必須在黑絲帶中，並且其內容在下面的框中。

我遇到的問題是，隨着在瀏覽器中調整網格大小，背景會正常運行。 我不想僅為此背景編寫大量的媒體查詢。 我嘗試使用background-size：cover屬性，但是這導致它在手機上看起來像是可怕的像素化，並且無法正確覆蓋平板電腦尺寸的div。 我也嘗試過絕對定位，但這也沒有用。

有什么幫助嗎？

謝謝！

Answer 1

此背景太簡單，無法使用圖像。 只需使用純CSS。

如果您在制作傾斜的邊框時遇到麻煩，請參考以下簡單教程> http://www.howtocreate.co.uk/tutorials/css/slopes