비뚤어진 Flexboxes 수정

Question

저는 비뚤어진 CSS 디자인으로 웹 사이트를 운영해야합니다. 블랙 박스에

당신이 문제를 볼 수 있습니다 : ABC 방송 컨테이너가 올바른 위치에이 arent 일부 코드는 다음과 후

내 결과 : 목표는 몇몇 유사한 디자인입니다. 어떻게 해결할 수 있습니까?

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>

내가 어떤 도움 :) 감사합니다 감사하겠습니다

, 조나스는

Answer 1

변경했다 :

• 기울 대신 각각의 모든 요소를 ​​기울일의 플렉스 컨테이너입니다.
• skew() 대신 skewX()를 사용하십시오.
• 테두리 크기와 각 플렉스 항목의 나누기 폭을 줄여 구성 요소의 플렉스 기준을 계산합니다.
• 왼쪽 패널의 밑받침 상자를 기울여서 왼쪽으로 -5 %로 변환하면됩니다.
• 플렉스 컨테이너의 너비를 늘려 몸체가 오른쪽으로 넘치도록하십시오.
• 숨기기, 스크롤을 사용하지 않으려면 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

나는 더 나은 방법이 .flex-container에 skew을 적용하는 것입니다 생각합니다.

기본 문제는 각 요소를 자체적으로 왜곡하여 내부 왜곡이 발생한다는 것입니다. 컨테이너를 기울이면 외곽선을 따라 가면서 내용물이 비뚤어지게됩니다.

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>