尋找一種方式來模擬形狀不規則的DIV

我開發了一個設計師誰是一個網站，我們應說，朝比捲筒紙印刷設計更加註重。他們爲這個網站的頁面設計給了我一個不規則的內容區域。尋找一種方式來模擬形狀不規則的DIV

如果這是一個手工編碼的網站，我可以做的佈局（刻意）的切片圖像和合理使用花車，絕對定位和z-指數 - 但該網站是在Drupal的正在做的和我的內容區域它是什麼（我想我可以做一些嚴重的黑客在node.tpl.php，但即使這樣，也有問題）。

這裏就是我的意思是 - 無論是頁眉和頁腳有伸出他們的位延伸到內容區域：

+--------------------------------------------------+ 
|             | 
|    LOGO/HEADER AREA     | 
|             | 
|  +------------------------------------------+ 
|  |   HEAD ONE FOR PAGE    | 
|  | Lorem ipsum dolor sit amet, consectetur | 
|  | adipiscing elit. Praesent in lectus in | 
+-------+ lectus tempor volutpat vitae velnunc. | 
| Duis diam sem, mattis in eleifend nec,vulputate | 
| ac dolor.Aliquam eleifend, mi non adipiscing  | 
| condimentum, erat nunc consectetur lorem, at  | 
| aliquet arcu purus non sapien. Sed in neque eu | 
| velit venenatis tincidunt vel in est.   | 
|             | 
| Cras fermentum magna non erat pretium suscipit. | 
| Proin id leo neque. Aliquam vel metus eget  | 
| libero venenatis consectetur. Aliquam  +-----+ 
| lobortis lacinia eros vel vulputate.Mauris |  | 
| lorem diam, bibendum et fringilla nec ... |  | 
+--------------------------------------------+  | 
|             | 
|     LOGO/FOOTER AREA     | 
+--------------------------------------------------+

現在我幾乎沒有可行的解決辦法是把內容區的內容到表，明智地使用行和列來避免突出區域。除了是一個痛苦，它違背了使用CMS的目的 - 在每個頁面的HTML必須由手撥弄使表細胞的頁面限制範圍內正常工作。

所以 - 我想我的問題是：是否有一個純CSS（甚至是CSS/JavaScript）的方式做到這一點，而不訴諸脆弱的，容易出錯的表編碼在每一頁？

（注：我已經告訴設計師，這是一個問題，但是客戶端已經批准的設計的話，這個項目至少，我堅持了下來）

來源

2011-04-01 jmarkel

我真的不知道如何寫一個答案，但也許你可以使用聯鎖div的身體組合（http://stackoverflow.com/questions/1106352/creating-interlocking-irregular-borders -with-css）和不規則圖像形狀的精靈（http://www.jaypan.com/blog/css-sprites-irregular-shapes）到達whe你想成爲什麼？ – 2011-04-01 13:52:36

[我怎樣才能使用css3和html5形成不規則形狀的div？]（http://stackoverflow.com/questions/12126731/how-can-i-make-a-div-with-irregular-shapes -with-css3-and-html5） – TylerH 2017-01-20 14:41:23

其他的解決方法 - 這個q在6年前被問及，並且在另一個之前的一年半之前回答。 – jmarkel 2017-01-21 16:26:23

嘿！這樣的解決方案呢？ http://jsfiddle.net/steweb/H7s2P/

你會「只是」需要分割內容的段落。頂部的一個照顧頭「效果」的，底部一個照顧頁腳「效果」的（通過「浮動」和餘量調整技巧）:)

標記：

<div id="wrapper"> 
    <div id="header">LOGO/HEADER AREA</div> 
    <div id="content"> 
     <div id="piece-of-header"></div> 
     <p id="top"> 
     HEAD ONE FOR PAGE <br /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices, nulla ac tincidunt faucibus, odio arcu pellentesque lectus, sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci, eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus, eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla, vehicula sed dictum ut, dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapien risus eleifend urna, sed posuere er 
     </p> 
     <div id="piece-of-footer"></div> 
     <p id="bottom"> 
     rttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapittitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapienus eleifend urna, sed posuere er 
     </p> 
    </div>  
    <div id="footer">LOGO/FOOTER AREA</div>  
</div>

CSS：

#wrapper{ 
    width:400px; 
    margin:0 auto; 
} 
#header, #footer{ 
    padding:20px; 
    text-align:center; 
    background:#BEBEBE; 
} 
#content{ 
    overflow:hidden 
} 
#content p#top{ 
    padding-top:10px; 
} 
#content p#bottom{ 
    padding-bottom:10px; 
} 
#piece-of-header{ 
    width:70px; 
    height:70px; 
    float:left; 
    margin:0 20px 10px 0; 
    background:#BEBEBE; 
    clear:both; 
} 
#piece-of-footer{ 
    margin:12px 0px 0px 10px; 
    width:70px; 
    height:70px; 
    float:right; 
    background:#BEBEBE; 
}

來源

2011-04-01 14:25:16 stecb

我覺得必須有一個至少覆蓋90％問題的css解決方案......如果我將額外的div粘貼到node.tpl.php中，它看起來好像只是可以做到的。謝謝！ – jmarkel 2011-04-01 15:37:20