响应式对齐倾斜的Divs [英] Responsively Align Slanted Divs

问题描述

使用此技术的修改版本，我已管理为我正在处理的网站做出倾斜的响应式div。我遇到的问题是，有3个倾斜的 divs 在彼此之上，它们意味着在页面上创建一条对角线（所以每个倾斜的div需要与其周围的人适当对齐）。使用这些div的百分比宽度目前还没有工作，但我不确定还有什么可以尝试的。

一个好的解决方案是响应和[最好] css-only。

* {margin：0; padding：0;}。hero {width：100％;位置：相对;边框：1px纯黑色; background-color：green;}。slanted {position：relative;背景颜色：紫色;宽度：40％; padding：3em 0 3em 1em;}。slanted：after {content：'';背景颜色：紫色;位置：绝对; top：0;底部：0;右：-6em;宽度：20em;溢出：可见; z-index：1; -webkit-transform：skewX（-13deg）; -moz-transform：skewX（-13deg）; -ms-transform：skewX（-13deg）; -o-transform：skewX（-13deg）; transform：skewX（-13deg）;}。slanted h2 {position：relative; z-index：3;}。hero1 .slanted {width：30％;}。hero2 .slanted {width：20％;}。hero3 .slanted {width：10％;}

< div class =hero hero1> < div class =slanted> < h2>一些文字< / h2> < / DIV>< / DIV> < div class =hero hero2> < div class =slanted hero-text> < h2>一些文字< / h2> < / DIV>< / DIV> < div class =hero hero3> < div class =slanted hero-text> < h2>一些文字< / h2> < / DIV>< / DIV>

jsfiddle

解决方案

您无法如果你正在为内容div使用基于百分比的宽度并为斜体使用静态宽度，那么只用CSS就可以做到这一点。

试想一下，可以说，你的页面宽度是10，每个斜面的宽度是1.你有3个div，分别为10％，20％ ％和30％，这意味着它们的宽度分别是1,2和3。添加斜线使得它们的宽度为2,3和4，因此它们排成一列。现在，当我们将容器宽度设置为20时，问题就出现了，因此在添加斜面后，div现在是4,6和8或5,7和9。他们不再排队，因为div宽度改变了，但斜线没有改变。

如果你没有IE8支持，你可以使用calc（<一个href =http://caniuse.com/#feat=calc =nofollow> http://caniuse.com/#feat=calc ）和最小宽度来实现你喜欢的东西想。斜角长度为29px，所以如果您将div宽度更改为calc（100％-700px），calc（100％-729px）和calc（100％-758px）或任意三个像素宽度的集合，只要它们保持29px然后设置相距29px的最小宽度，你应该能够实现你想要的东西。

编辑： Codepen示例 http://codepen.io/supah_frank/pen/oJcIA

只需更改此CSS

  .hero1 .slanted {
 width：calc（ 100％ -  900px）; 
 min-width：358px; 
} 
 .hero2 .slanted {
 width：calc（100％ -  929px）; 
 min-width：329px; 
} 
 .hero3 .slanted {
 width：calc（100％ -  958px）; 
 min-width：300px; 
} 
  

Using a modified version of this technique, I have managed to make slanted, responsive divs for a website I'm working on. The problem I am running into is that there are 3 slanted divs on top of each other, and they are meant to create one diagonal line down the page (so each slanted div needs to align properly with the ones around it). Using percentage widths for these divs hasn't worked so far, but I'm not sure what else to try.

A good solution for this would be responsive and [preferably] css-only.

*{
    margin: 0;
    padding:0;
}
.hero{
    width: 100%;
    position: relative;
    border: 1px solid black;
    background-color: green;
}
.slanted{
    position: relative;
    background-color: purple;
    width: 40%;
    padding: 3em 0 3em 1em;
}
.slanted:after{
    content: '';
    background-color: purple;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6em;
    width: 20em;
    overflow: visible;
    z-index: 1;
    -webkit-transform: skewX(-13deg);
    -moz-transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -o-transform: skewX(-13deg);
    transform: skewX(-13deg);
}
.slanted h2{
    position: relative;
    z-index:3;
}
.hero1 .slanted{
    width: 30%;
}
.hero2 .slanted{
    width: 20%;
}
.hero3 .slanted{
    width: 10%;
}

<div class="hero hero1">
    <div class="slanted">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero2">
    <div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero3">
    <div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>	

jsfiddle

解决方案

You aren't going to be able to do this with just CSS if you are using JUST percentage based widths for the content divs and a static width for the slants.

Imagine it this was, lets say the width of your page is 10 and each of the slants has a width of 1. You have the 3 divs at 10%, 20%, and 30%, which means their widths are 1,2, and 3 respectively. Adding the slants makes their widths 2, 3, and 4, so they line up. Now, the problem comes when we make the container width 20, so the divs are now 4, 6 and 8, or 5, 7, and 9 after adding the slants. They no longer line up because the div width changed, but the slants didn't.

If you are okay with no IE8 support you can use a combo of calc (http://caniuse.com/#feat=calc) and min-width to achieve something like what you want. The slants are 29px long so if you change the div widths to calc(100% -700px), calc(100% -729px), and calc(100% -758px) or any set of three pixel widths as long as they stay 29px apart and then set a min-widths that are also 29px apart, you should be able to achieve something like what you want.

EDIT: Codepen example http://codepen.io/supah_frank/pen/oJcIA

Just change this CSS

.hero1 .slanted{
    width: calc(100% - 900px);
    min-width: 358px;
}
.hero2 .slanted{
    width: calc(100% - 929px);
    min-width: 329px;
}
.hero3 .slanted{
    width: calc(100% - 958px);
    min-width: 300px;
}

这篇关于响应式对齐倾斜的Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！