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

CSS响应式布局与对角线形状

1 个答案: