CSS를 사용하여 사다리꼴 이미지의 다른 모양을 만드는 방법은 무엇입니까?

Question

다른 사다리꼴 이미지를 사용해야하는 웹 사이트에서 작업하고 있습니다. 여기에 나는 그 이미지를 링크로 제공하고 있습니다 :

감사합니다. Riccardo, 당신의 노력에 감사드립니다.

다음은 아직 해결해야 할 2 가지 요소입니다.

이것은 코드를 구현 한 이미지입니다.

사이트의

1. 모양 이미지를 왜곡하지만됩니다. 현재 모양은 완벽하지만 모든 이미지 또한 내가 원하지 않는 모양과 함께 비뚤어졌습니다. 나는 지금 보여주고있는 것처럼 모든 이미지가 비뚤어 짐으로 보이지 않기를 바랍니다. 그 특정 문제에 대한 지침이 필요합니다.

2. 두 번째로 중요한 것은 사이트의 전체 구조입니다. 내 사이트는 100 %이지만 컨테이너에서는 높이와 너비가 고정되어 있지만 높이와 너비는 100 %가됩니다.

나는 현재 픽셀 대신 100 % 너비를 넣으려고했지만 모두 엉망입니다. 여기에 내 주어진 CSS를 게시하고 있습니다. 모양의 왼쪽 부분은 고정되어 있으며, 30 % 증가하고있는 동안 증가하지 않습니다. 그리고 오른쪽 측면 모양이 오른쪽으로 이동하고 중간 및 오른쪽 모양 사이에, CSS 코드에 따라 주황색으로 표시된 컨테이너 백 그룹이 표시됩니다. 그리고 결국 나는 모든 것을 엉망으로 만들었습니다. 여기에 그 링크가 있습니다 :

내가 추가하고 싶은 것은 그 컨테이너에 100 % 높이를 둘 수 있습니까? 왜냐하면 높이 100 %를 올리려고 할 때마다 전체 구조가 사라지기 때문입니다. 그 특정한 높이의 어떤 해결책이라도 요?

이미지 문제와 너비 높이 100 % 문제는 웹 사이트가 작동하는 데 중요합니다. 이것에 대한 귀하의지도가 필요합니다. 참고로

Answer 1

HTML 구조 :

<div id="container"> 
    <span id="left"> 
     <img src=""/> 
    </span> 
    <span id="middle"> 
     <img src=""/> 
    </span> 
    <span id="right"></span> 
</div> 

나는 순수 CSS로 당신을 위해 this 예를했다.

이제 어떻게 만드는지 설명하겠습니다.

컨테이너를 가져 와서 그 치수와 상대 위치를 설정하십시오.

#container{ 
    width: 600px; 
    background-color: orange; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
} 

를 설정하면 용기 내부의 overflow: hidden 모든 요소가 잘립니다 그들은 부모의 외부를 확장 할 수 없습니다.

컨테이너에 3 스팬을 넣은 후에 인라인 요소이므로 width 또는 height을 설정할 수 없습니다. 이렇게하려면 display: 속성을 inline-block으로 설정합니다. 이제 차원을 span에게 줄 수 있습니다.

span은 span이 겹치기를 원하기 때문에 absolute 위치에 있습니다.

절대 위치 이후에는 z-index을 사용하십시오.

3 스팬 ID.

#left { 
    position: absolute; 
    left: -100px; 
    display: inline-block; 
    width: 300px; 
    background-color: red; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 1; 
    overflow: hidden; 
} 
#left img { 
    -webkit-transform: skew(20deg,0deg); 
} 
#middle { 
    position: absolute; 
    left: 200px; 
    display: inline-block; 
    width: 200px; 
    background-color: green; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 3; 
    border-right: 10px solid white; 
    border-left: 10px solid white; 
    overflow: hidden; 
} 
#middle img { 
    -webkit-transform: skew(20deg, 0deg); 
    margin-left: -50px; 
} 
#right { 
    position:absolute; 
    right:-100px; 
    display:inline-block; 
    width:400px; 
    background-color:gray; 
    height:300px; 
    transform:skew(-20deg,0deg); 
    -ms-transform:skew(-20deg,0deg); /* IE 9 */ 
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */ 
    z-index:2; 
    overflow:hidden; 
} 

당신이 모양의 skew 변화가 볼 수 있듯이, 또한 overflow: hidden 내가 범위 내에서 img 부모 영역 외부에 가고 싶지 않기 때문에

.

기울이기 스팬 내에 img을 넣으면 모양의 왜곡도 발생합니다. 따라서 적용하십시오.

#nameofskewedcontainer img { 
    -webkit-transform: skew(20deg, 0deg); 
} 

여기서 skew 속성은 스팬에 적용되는 것과 정확히 반대입니다. 그것으로 나는 img을 비뚤어 짐이없는 표준 모양으로 유지합니다. (jsfiddle 데모에서 제거하고보십시오)

그래서 나는 분명히했으면 좋겠다. 모든 것이 의견을 남기려면!

SECOND UPDATED 해결책 :

WIDTH 100 %

CSS->

#container { 
    width: 100%; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
} 

#left { 
    position: absolute; 
    left: -100px; 
    display: inline-block; 
    width: 50%; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 1; 
    overflow: hidden; 
} 
#left img { 
    transform: skew(20deg, 0deg); 
    -moz-transform: skew(20deg, 0deg); 
    -webkit-transform: skew(20deg, 0deg); 
} 
#middle { 
    position:absolute; 
    left: 30%; 
    display: inline-block; 
    width: 40%; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 3; 
    border-right: 10px solid white; 
    border-left: 10px solid white; 
    overflow: hidden; 
} 
#middle img { 
    transform: skew(20deg, 0deg); 
    -moz-transform: skew(20deg, 0deg); 
    -webkit-transform: skew(20deg, 0deg); 
    margin-left: -50px; 
} 
#right { 
    position: absolute; 
    right: -100px; 
    display: inline-block; 
    width: 50%; 
    background-color: gray; 
    height: 300px; 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); /* IE 9 */ 
    -webkit-transform: skew(-20deg, 0deg); /* Safari and Chrome */ 
    z-index: 2; 
} 

어쨌든 로이, 유래 당신이 뭔가 요청할 수 있습니다,하지만 당신이 연습해야 기억 당신에게 주어진 답변. 이것은 당신이 정말로 뭔가를 배울 수있는 유일한 방법입니다.