歪んだフレックスボックスを修正しました

Question

私は歪んだCSSデザインのウェブサイトを行う必要があります。目標は、いくつかの類似した設計である：

と、いくつかの符号化後の私の結果は以下の通りです：ABCコンテナを右の位置にアレント：あなたが問題を見ることができるブラックボックスで

。どのように私はそれを修正することができますか？

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    float: right; 
 
} 
 

 
.flex-content { 
 
    transform: skew(-5.5deg); 
 
    background-color: red; 
 
    height: 33%; 
 
    text-align: center; 
 
    width: 45%; 
 
    margin: 5px 5px 5px 50px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.overlay-box { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skew(-5.5deg); 
 
    float: left; 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>

私は任意のヘルプ:) をいただければ幸い私はより良いアプローチが.flex-containerにskewを適用することであろうと信じて、 ジョナス

Answer 1

変更が行わ：

• スキュー代わりに、それぞれ、すべての要素をゆがめるのフレックスコンテナ。
• skew（）の代わりにskewX（）を使用してください。
• 各フレックスアイテムの境界線のサイズと分割幅を減らすことによって、コンポーネントのフレックスベースを計算します。
• 左側のパネルのアンダーレイボックスを斜めにして、左側に-5％に平行移動して使用してください。
• フレックスコンテナの幅を広げ、ボディを右にオーバーフローさせます。
• Hide、スクロールを無効にするbodyタグのoverflow-x。

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    overflow-x:hidden; 
 
} 
 

 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 80%; 
 
    height: 100%; 
 
    transform: skewX(-5.5deg); 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    position: absolute; 
 
    left: 25%; 
 
    
 
} 
 

 
.flex-content { 
 
    background-color: red; 
 
    border:2px solid black; 
 
    flex: 0 1 calc(32% - 2px); 
 
    display: flex; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 

 
.flex-content:hover{ 
 
background-color:gray; 
 
transition:all 0.3s ease-in-out; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    left: -5%; 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skewX(-5.5deg); 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>

Answer 2

、ありがとうございました。

基本的な問題は、各要素を独自に歪ませて、その場で歪めてしまうことです。コンテナを斜めにすると、外形に沿って内容が歪んでしまいます。

html, body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height:100%; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
} 
 
a { 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    align-self: left; 
 
    flex-direction: row; 
 
    width: 70%; 
 
    height: 100%; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    flex-wrap: wrap-reverse; 
 
    float: right; 
 
    transform: skew(-5.5deg); 
 
} 
 

 
.flex-content { 
 
    background-color: red; 
 
    height: 33%; 
 
    text-align: center; 
 
    width: 45%; 
 
    margin: 5px 5px 5px 15px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.underlay-box { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.overlay-box { 
 
    width: 30%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transform: skew(-5.5deg); 
 
    float: left; 
 
} 
 

 
.gmk { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 2px red solid; 
 
    /*background: url('bild1.jpg'); */ 
 
    background-size: cover; 
 
    box-sizing:border-box; 
 
}

<div class="underlay-box"></div> 
 
<div class="overlay-box"></div> 
 
<div class="flex-container"> 
 
    <div class="flex-content"> 
 
    <div class="gmk"><a href="mediothek.html">A</a></div> 
 
    </div> 
 
    <div class="flex-content"><a href="mediothek.html">B</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">C</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">D</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">E</a></div> 
 
    <div class="flex-content"><a href="mediothek.html">F</a></div> 
 
</div>