flexbox에서 div를 호버 위에서 늘리십시오.

Question

3 열을 표시하는보기를 구현하려고합니다. 사용자가 그 중 하나를 가리키면 다른 사용자를 희생 시켜서 성장해야합니다. 나는 몇 가지 요구 사항이 있습니다

• 나는 배경 이미지를 가지고 각 열을 원하는 및 열 크기를 조정할 때 이동하지 않아야합니다.
• 가 열이 증가 할 때/원활하게 전환 할 수
• 그것은 사파리, 파이어 폭스와 크롬

가 나는 또한 가능하면 대각선으로 구분 된 각 열을하고 싶은 적어도에서 작동합니다 축소해야한다. 이것은 최종 결과가 어떻게 보일지입니다 :

나는 기본 기능이 작동하게,하지만 몇 가지 문제로 실행했습니다

• 나는 배경 이미지를 얻을 관리 적이 없다 부모 div에서 수정 될 수 있습니다.
• 전환이 Safari에서 작동하지 않습니다.
• 부트 스트랩을 기반으로하는 웹 사이트 인 실제 컨텍스트에서는 배경 이미지가 사파리와 Chrome에서 무작위로 픽셀 단위로 이동합니다 .
• 난 클립 경로를 사용하여 대각선을 달성하기 위해 노력했지만, 이것은 크롬 매우 저조한 사파리에서 작동하지 않으며
• 세번째 행의 두번째에서 첫 번째 열을 열을 변경하는 비트
를 조정할 때
• 크롬에서 오른쪽/오른쪽 픽셀 열이 깜박임

감사합니다. transform: skew() 하나

.content { 
 
    display: flex; 
 

 
    border: 1px solid #f00; 
 
    background: #fbb; 
 
    padding: 10px; 
 
    height: 800px; 
 
    color: #fff; 
 
} 
 

 
.col { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    transition: flex-grow .3s; 
 
    -webkit-transition: flex-grow .3s; 
 

 
    border: 1px solid #0f0; 
 
    padding: 10px; 
 
} 
 

 
.col:hover { 
 
    flex-grow: 5; 
 
    transition: flex-grow .3s; 
 
    -webkit-transition: flex-grow .3s; 
 
} 
 

 
.col1 { 
 
    background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-attachment: fixed; 
 
} 
 

 
.col2 { 
 
    background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-attachment: fixed; 
 
} 
 

 
.col3 { 
 
    background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-attachment: fixed; 
 
}

<div class="content"> 
 
    <div class="col col1"> 
 
    <h1>Foo!</h1> 
 
    </div> 
 
    
 
    <div class="col col2"> 
 
    <h1>Bar!</h1> 
 
    </div> 
 
    
 
    <div class="col col3"> 
 
    <h1>Brovinkel!</h1> 
 
    </div> 
 
</div>

Answer 1

이 항목을 기울일 수 :

여기에 내 현재 코드입니다.

위의 왼쪽 및 오른쪽 아래 영역이 채워지지 않으므로 왼쪽/오른쪽으로 넓혀집니다.

마지막으로 이미지의 의사를 사용하는 text/image의 skew를 되돌립니다. 당신은 또한 _skew_을 되돌릴 다음보기를 포함하도록 _widen_하고 필요한 항목을 기울`) (스큐 :

스택 변환`로 봐

.content { 
 
    display: flex; 
 
    height: 400px; 
 
    color: #fff; 
 
    overflow: hidden; 
 
    border: 5px solid #f00; 
 
    background: lime; 
 
} 
 

 
.col { 
 
    position: relative; 
 
    overflow: hidden; 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    transition: flex-grow .3s; 
 

 
    transform: skew(-20deg, 0); 
 
    background: yellow; 
 
} 
 

 
.col + .col { 
 
    border-left: 10px solid #0ff; 
 
} 
 

 
.col:first-child { 
 
    margin-left: -100px; 
 
} 
 
.col:last-child { 
 
    margin-right: -100px; 
 
} 
 

 
.col::before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: calc(100% + 200px); 
 
    margin-left: -100px; 
 
    display: block; 
 
    background-attachment: fixed; 
 
    transform: skew(20deg, 0); 
 
} 
 

 
.col:hover { 
 
    flex-grow: 3; 
 
    transition: flex-grow .3s; 
 
} 
 

 
.col1::before { 
 
    background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
} 
 

 
.col2::before { 
 
    background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
} 
 

 
.col3::before { 
 
    background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
} 
 

 
.col h1 { 
 
    margin: 0; 
 
    padding: 10px; 
 
    transform: skew(20deg, 0); 
 
} 
 

 
.col:first-child h1 { 
 
    margin-left: 40px; 
 
}

<div class="content"> 
 
    <div class="col col1"> 
 
     <h1>Foo!</h1> 
 
    </div> 
 
    
 
    <div class="col col2"> 
 
     <h1>Bar!</h1> 
 
    </div> 
 
    
 
    <div class="col col3"> 
 
     <h1>Brovinkel!</h1> 
 
    </div> 
 
</div>