具有对角线形状的 CSS 响应式布局

Question

我正在将此站点开发为一个单页可滚动站点，其中每个部分都是对角线形状。有没有办法让这个响应更灵敏，不管屏幕大小，当有人看到主页时，他们可以看到右下角的小桃子三角形，里面有“我们的工作”这个词？另外，如果有更好的方法来设置这个页面，我欢迎任何建议。

http://bit.ly/1jwn41m

CSS和HTML可以在“查看源代码”中查看

       <div id="logo" data-type="background" data-speed="10">
            <h1><img src="<?php bloginfo('template_url'); ?>/images/logo.png"/></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            <h4>inspiring people to take the leap and make their ideas happen</h4>
            <div id="arrow"></div>
        </div>
        <section id="portfolio" data-type="background" data-speed="10">
            <h3 id="work">Our Work</h3>
     </secion>
      <section id="contact">
      <h3 id="touch">Get in Touch</h3>
            <?php echo do_shortcode( '[contact-form-7 id="9" title="Contact form 1"]' ); ?>
      </section>

            <div id="shapes">
                <div id="design-shape"></div>   
                <div id="contact-shape"></div>  

            </div>  

---

CSS

#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;
}

Answer 1

很难为 响应式 下一个适合所有人期望的定义。

在您的情况下，很容易适应尺寸变化，但不能适应比例变化。

无论如何，一种方法可能是以下，使用 vh 单位进行定位（使用此技术，您将无法支持 IE8，并且 Safari 存在错误）

HTML

<div class="test">OUR WORK</div>
<div class="diagonal"></div> 

CSS

.test {
    position: absolute;
    top: 90vh;
    width: 98%;
    text-align: right;
    padding: 0px;
    z-index: 2;
}

.diagonal {
    background-color: yellow;
    position: absolute;
    top: 90vh;
    width: 98%;
    height: 200px;
    z-index: -1;
    -webkit-transform: skewY(-45deg);
    -webkit-transform-origin: 80% 0px;
    transform: skewY(-45deg);
    transform-origin: 80% 0px;
}

fiddle