title: CSS responsive layout with diagonal shapes
body: <p>I'm developing this site to be a one-page scrollable site where each section is a diagonal shape.  Is there a way to make this more responsive where, regardless of what the screen size is, when someone sees the home page they can see the little peach triangle on the lower right corner with the word "Our Work" in it? Also, if there is a better way to set up this page, I welcome any suggestions.</p>
  
  <p><a href="http://bit.ly/1jwn41m" rel="nofollow">http://bit.ly/1jwn41m</a></p>
  
  <p>The CSS and HTML can be viewed in "View Source"</p>
  
  <pre><code>       &lt;div id="logo" data-type="background" data-speed="10"&gt;
              &lt;h1&gt;&lt;img src="&lt;?php bloginfo('template_url'); ?&gt;/images/logo.png"/&gt;&lt;/h1&gt;
              &lt;h2 class="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;
              &lt;h4&gt;inspiring people to take the leap and make their ideas happen&lt;/h4&gt;
              &lt;div id="arrow"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;section id="portfolio" data-type="background" data-speed="10"&gt;
              &lt;h3 id="work"&gt;Our Work&lt;/h3&gt;
       &lt;/secion&gt;
        &lt;section id="contact"&gt;
        &lt;h3 id="touch"&gt;Get in Touch&lt;/h3&gt;
              &lt;?php echo do_shortcode( '[contact-form-7 id="9" title="Contact form 1"]' ); ?&gt;
        &lt;/section&gt;
  
              &lt;div id="shapes"&gt;
                  &lt;div id="design-shape"&gt;&lt;/div&gt;   
                  &lt;div id="contact-shape"&gt;&lt;/div&gt;  
  
              &lt;/div&gt;  
  </code></pre>
  
  <hr>
  
  <p>CSS</p>
  
  <pre><code>#logo {
  height: auto;
  width: 1000px;
  text-align: center;
  margin: 100px auto;
  z-index: 15;
  margin-top: 100px;
  }
  #logo img {
  text-align: center;
  }
  
  #shapes {
   overflow-x:hidden;
  }
  
   #design-shape {
   background: none repeat scroll 0 0 #e98e82;
   position: absolute;
   transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
   height: 1040px;
   top: 1200px;
   left:50%;
   width: 5000px;
   margin-left: -2500px;
   z-index: 6;
   }
  
   #contact-shape {
   background: none repeat scroll 0 0 #333333;
   position: absolute;
   transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
   height: 1460px;
   top: 2757px;
   left:50%;
   width: 5000px;
   margin-left: -2500px;
   z-index: 1;
   }
  
   #portfolio {
   position: relative;
   left: 50%;
   margin-left: -210px;
       margin-top: -60px;
   width: 800px;
   z-index: 8;
   overflow: auto;
   }
  
   #contact {
   position: relative;
   left: 50%;
   z-index: 9;
   width: 800px;
   margin-left: 276px;
       margin-top: 580px;
  }
  </code></pre>