CSS가있는 Parrallelogram

-3

Locnville 웹 사이트의 배경과 동일한 효과를 얻으려고합니다 : http://locnville.com (기울어 진 사각형 또는 평행 사변형). 수천 개의 예제가 있기 때문에 나는 평행 사변형을 얻을 수 있지만 얻을 수는 없습니다. 같은 효과. 아무도 이것으로 나를 도울 수 있습니까?CSS가있는 Parrallelogram

내 CSS :

두 번째 div 요소에 최고 패딩뿐만 아니라 경사를 가리키는없는 반복과 최고의 위치 속성을 배경 이미지로, 두 개의 분리 된 div를 만들 필요가

#parallelogram { 
    width: 150px; 
    height: 100px; 
    -webkit-transform: skew(20deg); 
     -moz-transform: skew(20deg); 
     -o-transform: skew(20deg); 
    background: red; 
}

출처

2014-01-29 Frederik Moller

지금까지 무엇을 가지고 계셨습니까? –

이전에 시도한 시도가 무엇인지 보여주십시오. 지금까지 해본 코드에 대한 코드를 게시하거나 찾은 사이트에 연결할 수 있습니다. 여기에 질문하기 전에 몇 가지 조사를 해보십시오. – Joeytje50

내 편집을 확인하십시오. ...... –

당신이 찾고있는 것이 상단 왼쪽에서 하단 오른쪽으로 기울어 진 것 (또는 그 반대)이므로 상단 가장자리가 비스듬히 기울어 진다고 가정합니다.

당신은 당신의 상자를 회전, 등 높이와 너비 값이 기본적으로 교환하는 일에서 기억해야

~~...~~

당신이 왜곡되지하기에 콘텐츠가 필요한 경우 ...

#parallelogram { 
    width: 200px; 
    position: relative; 
    padding: 1em; 
    margin-top: 1em; 

} 

#parallelogram:before { 
    content: ""; 
    -webkit-transform: translateY(-50%) skew(0,5deg); 
    -moz-transform: translateY(-50%) skew(0,5deg); 
     -o-transform: translateY(-50%) skew(0,5deg); 
    background-color:red; 
    position:absolute; 
    top:100%; 
    bottom:-200%; 
    left:0; 
    right:0; 
    z-index: -1; 
}

패딩 및 위치 지정을 사용하면 원하는 모양 (기울기뿐만 아니라)을 얻을 수 있으며 주석에서 Tim의 조언을 받아 들일 수 있습니다.

출처

2014-01-29 21:30:48 niaccurshi

rotattion은 필요하지 않습니다. 질문에 대한 언급에서 내 바이올린을보십시오. –

대답으로 집어 넣으세요;) – niaccurshi

필자의 글에 대한 의견을 자유롭게 훔쳐 주시기 바랍니다. 나는 브라우징 분위기에서만입니다. 순간적으로 현실에 기여할 너무 피곤했습니다. –

정사각형 이미지 (첫 번째 div 배경색과 일치해야 함) 꽤 간단한 CSS이지만, 나는 한 걸음 더 나아가 a : before 또는 : after 요소와 이미지를 사용하지는 않을 것이다.

출처

2014-01-29 21:16:52 httpgio

CSS가있는 Parrallelogram

답변

관련 문제