如何构建响应式倾斜布局？

Question

我正在准备一个带有倾斜元素的新布局，应该以任何方式响应。 我目前在默认桌面和移动设备上看起来不错，但如果屏幕更大，布局就会被破坏：例如在我的 32" 屏幕上，文本从容器元素之外开始，就在倾斜元素之前。这不应该发生。

main {
  font-family: Arial;
}

.content_nocolor {
  padding: 60px 40px 40px 40px;
}

.content__slant1 {
  position: relative;
  padding: 40px 40px 120px 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant1:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004B4F;
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: top left;
}
.content__slant1 h1, .content__slant1 p {
  position: relative;
  color: #ffffff;
}
.content__slant1 h1 a, .content__slant1 p a {
  color: inherit;
}

.content__slant2 {
  position: relative;
  padding: 120px 40px 40px 40px;
  overflow: hidden;
  filter: drop-shadow(0px calc(-1*40px) 0px #f2f2f2);
}
.content__slant2:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  /* background-image: linear-gradient(#ff9d2f, #ff6126); */
  -webkit-transform: skewY(-3deg);
  -moz-transform: skewY(-3deg);
  -ms-transform: skewY(-3deg);
  -o-transform: skewY(-3deg);
  transform: skewY(-3deg);
  transform-origin: bottom right;
}
.content__slant2 h1, .content__slant2 h3, .content__slant2 p {
  position: relative;
  color: #000000;
}
.content__slant2 h1 a, .content__slant2 h3 a, .content__slant2 p a {
  color: inherit;
}

.content__slant3 {
  position: relative;
  padding: 0 40px 140px 40px;
  overflow: hidden;
  filter: drop-shadow(0px 40px 0px #f2f2f2);
}
.content__slant3:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F89300;
  /* background-image: linear-gradient(#ff9d2f, #ff6126); */
  -webkit-transform: skewY(3deg);
  -moz-transform: skewY(3deg);
  -ms-transform: skewY(3deg);
  -o-transform: skewY(3deg);
  transform: skewY(3deg);
  transform-origin: bottom right;
}
.content__slant3 h1, .content__slant3 h3, .content__slant3 p {
  position: relative;
  color: #000000;
}
.content__slant3 h1 a, .content__slant3 h3 a, .content__slant3 p a {
  color: inherit;
}

<main class="content">
  <div class="content__slant1">
    <h1>Office ipsum</h1>
    <p>That's great, but we need to add this 2000 line essay make it original, for can it handle a million in one go, yet it needs to be the same, but totally different this looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue we exceed the clients' expectations this is just a 5 minutes job.</p>
    <p>
      What you've given us is texty, we want sexy something summery; colourful make it look like Apple. Can you make it faster? the animation does not work, when i print the page or can you punch up the fun level on these icons give us a complimentary logo along with the website, nor thanks for taking the time to make the website, but i already made it in wix.
    </p>
  </div>
  
  <div class="content_nocolor">
  <p>There is too much white space why is a 15mb gif on the startpage a bad idea?!, yet you can get my logo from facebook.     </p>
  <p>
    That's great, but we need to add this 2000 line essay it needs to be the same, but totally different so there are more projects lined up charge extra the next time.
  </p>
  </div>
  
  <div class="content__slant2">
    <h1>... continues ...</h1>
    <p>
      We try your eye, but can you change everything? submit your meaningless business jargon to be used on the site!, but that will be a conversation piece this red is too red can you pimp this powerpoint, need more geometry patterns I have an awesome idea for a startup, i need you to build it for me. The flier should feel like a warm handshake. The animation does not work, when i print the page you might wanna give it another shot, or can you turn it around in photoshop so we can see more of the front can you make the blue bluer? jazz it up a little, can you please send me the design specs again?
    </p>
    <p>
        I know somebody who can do this for a reasonable cost. Anyway, you are the designer, you know what to do can you make the logo bigger yes bigger bigger still the logo is too big can you use a high definition screenshot, in an ideal world. Remember, everything is the same or better in an ideal world can you please send me the design specs again?
    </p>
    <h3>Thats not what i saw in my head at all!!</h3>
  </div>
  
  
  <div class="content__slant3">
    <h1>... and so it ends.</h1>
  </div>  
    
</main>

Answer 1

根据之前的评论做出的回答让任何人都可以看到：

它使用clip-path 代替转换，并从CSS var() 获取值以同时更新path 和padding。

描述想法的实时示例：

html {/* set here your min and max value for the slanted clip-path and padding values */
  --pad:clamp( 15px, calc(10vw - 30px) ,60px);
  /*           min       if valid       max  */
}

body {
  padding: 0 0 200px 0;
  margin: 0;
  background: transparent url("https://images.unsplash.com/photo-1622495546323-5dac33dedb01?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2167&q=80") no-repeat fixed;
  background-size: cover;
}

main {
  font-family: Arial;
    filter:
      drop-shadow(0px 20px 0px #f2f2f2) 
      drop-shadow(0px -20px 0px #f2f2f2)
      drop-shadow(20px 0px 1px #f2f2f2)
      drop-shadow(-20px 0px 1px #f2f2f2)  ;
}

.content_bgWhite {
  background-color: #ffffff;
}

.content_bgSemitrans {
  background-color: rgba(255, 255, 255, 0.25);
  display: inline-block;
  padding: 0px 20px;
 text-align:left;
}

.content_bgTransparent {
}

.content_noslant {
  padding: 60px ;
  text-align:center
}

.content__slant1 {
  --pad: calc(20px + 5vw);
  background:#004B4F;
  padding: 40px 40px var(--pad) 40px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pad) ), 0% 100%);

}

.content__slant1 h1, .content__slant1 p {
  position: relative;
  color: #ffffff;
}
.content__slant1 h1 a, .content__slant1 p a {
  color: inherit;
}

.content__slant2 {  
  background:#F89300;
  position: relative;
  padding: var(--pad) 40px 1px 40px;
  clip-path: polygon(0 0, 100% var(--pad), 100% 100%, 0% 100%);

}
.content__slant2 h1, .content__slant2 h3, .content__slant2 p {
  position: relative;
  color: #000000;
}
.content__slant2 h1 a, .content__slant2 h3 a, .content__slant2 p a {
  color: inherit;
}

.content__slant3 {
  background:#F89300;
  padding: 1px 40px var(--pad) 40px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pad) ), 0% 100%);
}
.content__slant3 h1, .content__slant3 h3, .content__slant3 p {
  position: relative;
  color: #000000;
}
.content__slant3 h1 a, .content__slant3 h3 a, .content__slant3 p a {
  color: inherit;
}

<main class="content">
  <div class="content__slant1">
    <h1>Office ipsum</h1>
    <p>That's great, but we need to add this 2000 line essay make it original, for can it handle a million in one go, yet it needs to be the same, but totally different this looks perfect. Just Photoshop out the dog, add a baby, and make the curtains blue we exceed the clients' expectations this is just a 5 minutes job.</p>
    <p>
      What you've given us is texty, we want sexy something summery; colourful make it look like Apple. Can you make it faster? the animation does not work, when i print the page or can you punch up the fun level on these icons give us a complimentary logo along with the website, nor thanks for taking the time to make the website, but i already made it in wix.
    </p>
  </div>
  
  <div class="content_noslant content_bgTransparent">
        <div class="content_bgSemitrans">
              <p>
                <b> I'm so sensible, i'm getting touch by that filter too.</b>
              </p>
              <p>
                  That's great, but we need to add this 2000 line essay it needs to be the same, but totally different so there are more projects lined up charge extra the next time.
              </p>
         </div>
  </div>
  
  <div class="content__slant2">
    <h1>... continues ...</h1>
    <p>
      We try your eye, but can you change everything? submit your meaningless business jargon to be used on the site!, but that will be a conversation piece this red is too red can you pimp this powerpoint, need more geometry patterns I have an awesome idea for a startup, i need you to build it for me. The flier should feel like a warm handshake. The animation does not work, when i print the page you might wanna give it another shot, or can you turn it around in photoshop so we can see more of the front can you make the blue bluer? jazz it up a little, can you please send me the design specs again?
    </p>
    <p>
        I know somebody who can do this for a reasonable cost. Anyway, you are the designer, you know what to do can you make the logo bigger yes bigger bigger still the logo is too big can you use a high definition screenshot, in an ideal world. Remember, everything is the same or better in an ideal world can you please send me the design specs again?
    </p>
    <h3>Thats not what i saw in my head at all!!</h3>
  </div>
  
  
  <div class="content__slant3">
    <h1>... and so it ends.</h1>
  </div>  
    
</main>

Answer 2

@media screen and (min-width: 1200px) {
  .content__slant1 {
    padding: 40px 40px 120px 40px;
  }
  .content__slant2 {
      padding: 180px 40px 0px 40px;
  }
  .content__slant3 {
      padding: 0 40px 180px 40px;
  }
}

成功了

Answer 3

使用媒体查询，使用最小宽度和最大宽度。

* {
  box-sizing: border-box;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
        opacity:0.90; filter:alpha(opacity=90);
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
´´´

Or something like that, my code does not correspond to your example but try.

Answer 4

在 css 中使用媒体查询 => @media。