in parte ho risolto, ma non riesco ancora a impostare i margini left e right 1px delle 3 strips
il top l'ho risolto inserendolo direttamente nell'header, che io ho chiamato footer, ma per right e left non funziona.
ti posto il codice che dopo questa modifica è un pò disordinato ma farò pulizia appena risolto il dilemma grafico

codice:
<!doctype html>
<html lang="it">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>##############</title>
	  <link rel="icon" href="favicon.ico" />
      <style> a {
     color: #7e9faa;
}
 a:link {
     text-decoration: none;
}
 a:visited {
     text-decoration: none;
}
 a:hover {
     text-decoration: none;
     color: #7e9faa;
}
 a:active {
     text-decoration: none;
}
 .logo{
     position: Absolute;
     top: 11px;
     left: 3px;
	 width:10%;
	 height:100px;
}
 div.contattaci {
     position: absolute;
     font-family: Verdana, sans-serif;
     font-size: 14px;
     color: #1f6383;
     text-align: left;
     border: 0px solid #1f6383;
     padding: 10px;
     top: 3px;
     left: 630px;
     width: 440px;
     height: 15px;
}
 .menubar{
     position: absolute;
	 background-color: #2e9bac;
     top: 72px;
     left: 411px;
	 right: 1px;
	 height:25px;
}
 div.menubar:before{
     content: '';
     top: 0px;
     left: 0px;
     position: absolute;
	 border: 1px solid #fff;
     border-top: 25px solid #fff;
     border-right: 14px solid transparent;
}
 .topbar{
     height:25px;
     right: 1px;
     position: Absolute;
     top: 45px;
     left: 559px;
     background-color: #1f6383;
}
 div.topbar:before{
     content: '';
     top: 0px;
     left: 0px;
	 width: 0;
     position: Absolute;
	 border: 1px solid #fff;
     border-top: 25px solid #fff;
     border-right: 14px solid transparent;
}
 .toplastbar{
     height:25px;
     position: Absolute;
     top: 99px;
     left: 120px;
     right: 1px;
     background-color: #7e9faa;
}
 div.toplastbar:before{
     content: '';
     top: 0px;
     left: 0px;
	 width: 0;
     position: absolute;
	 border: 1px solid #fff;
     border-top: 25px solid #fff;
     border-right: 14px solid transparent;
}
 .img {
     position: absolute;
     top: 122px;
     left: 1px;
     background-color:#fff;
     right: 1px;
     height: 250px;
     border: 1px solid #7e9faa;
}
 .contmenulat {
     position: absolute;
     top: 375px;
     left: 1px;
     height: 400px;
     background-color:#fff;
     width: 207px;
     bottom: 13px;
     border: 1px solid #7e9faa;
}
 .desktop {
     position: absolute;
     top: 375px;
     left: 213px;
     height: 400px;
     right: 1px;
     bottom: 13px;
     background-color:#fff;
     border: 1px solid #7e9faa;
}
		    
div.credit {
     position: absolute;
     font-family: Verdana, sans-serif;
     font-size: 9px;
     color: #fff;
     text-align: left;
     border: 0px;
     padding: 10px;
     top: 7px;
     right: 0px;
     height: 1px;
	 bottom: 0px;
}
 #menutop .menutop{
     height:25px;
     position: absolute;
}
 #menutop ul {
     font-family: Verdana, sans-serif;
     font-size: 14px;
     list-style-type: none;
     margin-top: 64px;
     margin-left: 551px;
     width: 413px;
     height: 25px;
     padding: 0;
     overflow: hidden;
     background-color: #2e9bac;
     position: absolute;
}
 #menutop li {
     float: left;
}
 #menutop li a {
     display: block;
     color: white;
     text-align: center;
     padding: 4px 16px;
     text-decoration: none;
}
 #menutop li a:hover:not(.active) {
     background-color: #7e9faa;
     text-decoration: none;
     color: white;
}
 #menutop li {
     border-right: 1px solid #fff;
     border-left: 1px solid #fff;
}
 #menutop li:last-child {
     border-right: 1px solid #fff;
}
 #menutop .active {
     background-color: #1f6383;
     text-decoration: none;
     color: white;
}
 #menulat ul {
     font-family: Verdana, sans-serif;
     font-size: 14px;
     list-style-type: none;
     margin-top: 367px;
     margin-left: -6px;
     padding: 0;
     width: 207px;
     background-color: #2e9bac;
     border: 0px;
     position: relative;
}
 #menulat li a {
     display: block;
     color: #fff;
     padding: 8px 16px;
     text-decoration: none;
}
 #menulat li {
     text-align: center;
     border-bottom: 1px solid #fff;
}
 #menulat li:last-child {
     border-bottom: none;
}
 #menulat li a.active {
     background-color: #1f6383;
     color: white;
}
 #menulat li a:hover:not(.active) {
     background-color: #7e9faa;
     color: white;
}
		   /* --- GENERALE ---*/
         
         #footer {
            width: 100%;
            overflow-x: hidden;
			margin-top:278px;
			bottom:1px;
         }
         
         /* --- FORME ---*/
         
         #footer > .strip {
            position: relative;
            min-height: 70px;
            padding-bottom: 20px;
            filter:
               drop-shadow(-1px -2px 0 #fff)
               drop-shadow(1px 0px 0 #fff)
               
               /* Decommenta questo per un effetto material design*/
               /*drop-shadow(0px 10px 20px #000)*/
            ;
         }
         #footer > .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: 70vw; }
         
         #strip3 { padding-left: 10vw; }
         #strip3::before { left: 30vw; }
     
         }
         
        
         /* --- COLORI --- */
         
         #footer           { background: #fff; color: #fff}
         
		 #strip1           { background: #aaa; }
         #strip2           { background: #aee; }
         #strip3           { background: #aae; }
         
         


 </style>
   </head>
   <body>
	    <div class="logo">
         <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="403" height="100" alt=""/>
      </div>
	<div class="contattaci">
Telefonaci:  <a href="tel:##############">##############</a>
Scrivici:    <a href="mailto:##############">##############</a>
	</div>
	  <div class="menubar"></div>
      <div class="topbar"></div>
      <div class="toplastbar"></div>
	  <div id="menutop"> 
  <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#tl">Trasporti e Logistica</a></li>
  <li><a href="#contatti">Contatti</a></li>
  <li><a href="#news">News</a></li>
  </ul>
	   </div>
      <div class="desktop"><a href="#home">desktop</a></div>
      <div class="contmenulat"></div>	 
	  <div class="img"><a href="#home">img</a></div>
  <div id="menulat">   
  <ul>
   <li><a class="active" href="#home">Home</a></li>
  <li><a href="#tl">Trasporti e Logistica</a></li>
  <li><a href="#contatti">Contatti</a></li>
  <li><a href="#news">News</a></li>
</ul>
  </div>
<div id="footer">
         <div id="strip1" class="strip"></div>
		 <div id="strip2" class="strip"></div>
		 <div id="strip3" class="strip"></div>
	</div>
</body>
</html>