寻找一种方式来模拟形状不规则的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