Ho indagato un po' e fatto qualche prova, direi che si può intervenire con vari approcci.
Qui una panoramica di alcuni metodi:
- Puoi usare un elemento o degli elementi <svg> nel formato XML per creare le forme che vai ad inserire opportunamente nel markup HTML. Chiaramente è necessaria la conoscenza dello standard SVG per poter ricreare tali forme.
- Puoi usare delle immagini SVG applicate magari come background degli elementi in questione, esterne o convertite come Data URI per applicarle direttamente nel CSS. In questo caso ti serve un programma o qualche strumento per grafica vettoriale con cui poter realizzare tali immagini.
- Puoi adoperare vari metodi per la realizzazione di "CSS Shapes" (vedi anche qui) con cui vai a ricreare le forme che ti servono usando solo del "semplice" CSS. Più o meno come hai già fatto nell'altra discussione impostando opportunamente i bordi con differenti dimensioni per ricreare le parti inclinate.
Personalmente ho provato a realizzare qualcosa proprio con quest'ultimo approccio ma usando il filtro skew per la parte inclinata e poi applicando il drop-shadow per creare un bordo attorno sopra il limite irregolare delle forme.
Qui l'elaborato di esempio:
codice HTML:
<!DOCTYPE HTML>
<html lang="it">
<head>
<title>Esempio</title>
<style>
/* --- GENERALE ---*/
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
font: 15px Verdana, sans-serif;
}
h1 {
margin: 0;
padding: 10px 30px;
}
#header {
width: 100%;
overflow-x: hidden;
}
/* --- FORME ---*/
#header > .strip {
position: relative;
min-height: 40px;
padding-bottom: 20px;
filter:
drop-shadow(-2px -2px 0 #fff)
drop-shadow(2px 0px 0 #fff)
/* Decommenta questo per un effetto material design*/
/*drop-shadow(0px 10px 20px #000)*/
;
}
#header > .strip::before {
content: "";
display: block;
position: absolute;
right: -20px;
bottom: calc(100% - 1px);
height: 25px;
background: inherit;
transform: skew(-22deg);
}
#strip2 { padding-left: 50vw; }
#strip2::before { left: 50vw; }
#strip3 { padding-left: 10vw; }
#strip3::before { left: 10vw; }
#main {
margin: 20px;
padding: 30px 20px 50px;
border: 3px solid;
border-radius: 20px;
}
/* --- MENU BAR --- */
ul.topmenu {
position: relative;
top: -20px;
margin: 0 20px;
padding: 0 0 0 1px;
color: inherit;
overflow: hidden;
list-style-type: none;
font-size: 14px;
}
ul.topmenu > li {
float: left;
border: solid #fff;
border-width: 0 1px;
margin-left: -1px;
}
ul.topmenu > li a {
display: block;
padding: 3px 5px;
text-decoration: none;
color: inherit;
}
/* --- COLORI --- */
body { background: #123444; }
#header { background: #aaa07f; color: #fff}
h1 { color: #fff; }
#strip1 { background: #7e9faa; }
#strip2 { background: #2e9bac; }
#strip3 { background: #1f6283; }
.topmenu a:hover { background: #0003; }
.topmenu a:active { background: #fff3; }
#main { background: #f7f7f7; color: #55384b; border-color: #fff}
</style>
</head>
<body>
<div id="header">
<div id="top">
<h1>Esempio</h1>
</div>
<div id="strip1" class="strip"></div>
<div id="strip2" class="strip">
<ul class="topmenu">
<li><a href="#home">Contatti</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Noi</a></li>
<li><a href="#about">Home</a></li>
</ul>
</div>
<div id="strip3" class="strip"></div>
</div>
<div id="main">
<h2>Lorem ipsum</h2>
<p>
Dolor sit amet, consectetur adipiscing elit. Morbi venenatis nibh sit amet mi elementum semper.
Quisque suscipit sem non est eleifend consectetur.
</p>
<p>
Suspendisse malesuada massa lorem, id pharetra arcu iaculis a.
Aliquam in dolor vitae purus interdum vulputate vel ac augue. Nulla congue vehicula purus eget scelerisque.
Nullam suscipit metus id sem eleifend, ut molestie eros dictum.
</p>
<p>
Curabitur faucibus urna nec ullamcorper pharetra.
Nunc eget lacus at arcu scelerisque gravida ut non lectus. Donec sit amet felis in justo hendrerit ornare eu sed risus.
Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam.
Sed nibh ante, tempor ac eleifend non, sodales a massa.
</p>
<p>
Phasellus ornare elementum semper.
Maecenas ullamcorper libero ex, eleifend porttitor lacus convallis a.
</p>
</div>
</body>
</html>
.
Chiaramente ho impostato il layout secondo una mia personale interpretazione, prendilo giusto come esempio che potrai adeguare come meglio credi per il tuo elaborato.
Non mi dilungo descrivendo riga per riga il codice che ho utilizzato ma se hai domande chiedi pure.
Rispondi quotando
però io sono duro di comprendonio quindi ti chiedo se puoi aggiungere qualche altro dettaglio.
Originariamente inviata da KillerWorm
