让div与曲线？

这似乎是一个模糊的问题，但你会看到我想要的东西后，你读了这个，我有设计，我应该“转换”为静态HTML页面，但我不知道我应该怎么做。让div与曲线？

设计：

http://i.imgur.com/KC3KqLA.png

曲线IM讲的是一个地方的标志是，在底部的另一个。

我至今（有点乱）：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote { 
 
\t margin: 0; padding: 0; border: 0; 
 
} 
 

 
body { 
 
\t font-family: Helvetica, Arial, Sans-Serif; line-height: 24px; 
 
\t background: #eee url(images/body-bg.jpg) center top no-repeat; 
 
} 
 

 
#container { 
 
\t width: 80%; margin: 0 auto; height:1000px; margin-top: -75px; background-color: blue; 
 
} 
 

 
#destaques { 
 
\t width:100%; 
 
\t height: 40%; 
 
\t background-color: grey; 
 
} 
 

 
#header { 
 
    overflow: hidden; 
 
\t padding: 0 0 50px 0; 
 
} 
 

 
#mllcont { 
 
\t height:200px; 
 
\t background-color: grey; 
 
} 
 

 
#slidecont { 
 
\t height: 650px; 
 
\t background-color: red; 
 
} 
 

 
#squares { 
 
    width:100%; 
 
    height:250px; 
 
} 
 

 
#divs div { 
 
     height: 250px; 
 
     width: 20%; 
 
     border: 0px solid red; 
 
     margin-left: 2.5%; 
 
     margin-right: 2.5%; 
 
     float: left; /*Here you can also use display: inline-block instead of float:left*/ 
 
     background: orange; 
 
} 
 

 
\t #header h1 { 
 
\t \t float: left; 
 
\t } 
 

 

 
#content, #footer, #header { 
 
\t height: 100%; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Particle</title> 
 

 
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> 
 

 
</head> 
 

 
<body> 
 

 
\t <div id="slidecont"> 
 

 
\t \t <div id="mllcont"> 
 

 
\t \t \t <div id="logo"> 
 
\t \t \t </div> 
 

 
\t \t \t <div id="header"> 
 
\t \t \t \t \t <ul id="categories"> 
 
\t \t \t \t \t \t <li><a href="#">Menu1</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Menu2</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Menu3</a></li> 
 
\t \t \t \t \t \t <li><a href="#">Menu4</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t </div> 
 

 
\t \t \t <div id="languages"> 
 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t \t </div> 
 

 
\t <div id="container"> 
 

 
\t \t \t <div id="squares"> 
 
\t \t \t  <div id="divs"> 
 
\t \t \t \t  <div>One</div> 
 
\t \t \t \t  <div>Two</div> 
 
\t \t \t \t  <div>Three</div> 
 
\t \t \t \t  <div>Four</div> 
 
\t \t \t  </div> 
 
\t \t \t </div> \t 
 

 
\t \t \t <div id="destaques"> 
 

 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div id="Projetos"> 
 

 
\t \t \t </div> 
 

 
\t </div> \t 
 

 
\t \t <div id="footer"> 
 
\t \t \t <ul id="credits"> 
 
\t \t \t \t <li><a href="http://wordpress.org" class="wordpress">Powered by WordPress</a></li> 
 
\t \t \t \t <li><a href="http://www.blog.spoongraphics.co.uk" class="spoongraphics">Theme by SpoonGraphics</a></li> 
 
\t \t \t </ul> 
 
\t \t \t <p id="back-top"><a href="#header">Back to top</a></p> 
 
\t \t </div> 
 
\t </div> 
 

 

 
</body> 
 
</html>

来源

2015-07-02 Duarte Andrade

你可能想为此使用背景图像。不是CSS。 – fiddler

您可以使用透明的背景图片（png格式或.gif），并将它们分配给每个DIV的位置，也可以使用绝对定位的div和z-index水平线来实现你所追求的视觉效果，但如果网站需要布局响应，那么使用这种方法就有很多工作要做。

例如，在选择的图像编辑器中提取顶部曲线（白色位和蓝色位），确保将背景透明并正确保存。然后，它只是使用代码的线沿线的情况：

//STYLES CSS 
.splash{ 
    background-image:url("icewater.jpg"); 
    width:1289px; 
    height:513px; 
    position:relative; 
    z-index:1; 
} 
.top-curved-section{ 
    position:relative; 
    top:0; 
    left:0; 
    z-index:2; 
    background-image:url("blue-white-curve.gif"); 
    background-repeat:no-repeat; 
    background-position:top left; 
//Padding to get your logo element to display properly 
    padding: 20px 0 0 20px; 
//These heights are guesses to force the size of the div for background image 
    width:400px; 
    height:150px; 
}

HTML，在其最简单的形式：

<div class="splash"> 
<div class="top-curved-section"> 
<img src="yourlogo.png" alt="Your Logo"> 
</div> 
</div>

希望这有助于，并设置你的方式。此代码未经测试。你可以使用相同的主体为你的初始页面的底部弯曲部分使用：

.bottom-curved-section{ 
     position:relative; 
     bottom:0; 
     right:0; 
     text-align:right; 
     z-index:2; 
     background-image:url("blue-white-curve2.gif"); 
     background-repeat:no-repeat; 
    background-position:bottom right; 
    //Padding to get your logo element to display properly 
     padding: 0 20px 20px 0; 
    //These heights are guesses to force the size of the div for background image 
     width:400px; 
     height:150px; 
    }

来源

2015-07-02 16:19:37 WilliamsGFX

谢谢你的完整awsner，即将拍摄图像并尝试做到这一点。 –

让div与曲线？

回答

相关问题