2013-07-13 85 views
-2

我正在一個網站上工作,我需要使用不同的梯形形狀的圖像。在這裏我給你鏈接中的圖像:如何使用css創建不同形狀的梯形圖像?

感謝Riccardo,感謝你的努力。

以下是我仍然需要解決的兩點。

這是我在實現代碼後得到的圖像。

enter image description here

網站的
  1. 形狀將被扭曲,但沒有圖像。目前的形狀是完美的,但所有的圖像也隨着我不想要的形狀而偏斜。我希望所有圖像不會像現在顯示的那樣顯示爲偏斜。所以需要關於這個特定問題的指導。

  2. 而第二個最重要的是關於網站的總體結構。我的網站將在100%,但在容器中,你已經給出了固定的高度和寬度,但我想要的高度和寬度將是100%。

我試過把100%的寬度,而不是當前的像素,但它都搞砸了。在這裏,我張貼我給定的CSS。形狀的左側部分是固定的,當我給出30%的寬度時,它不會增加。右側的形狀向右移動,在中間和右側形狀之間顯示容器後組,按照css代碼顯示橙色。最後我搞砸了所有的東西,這是這個鏈接:

我還想補充的另一件事是,可以將100%的高度放在該容器上。因爲無論何時我試圖將身高設置爲100%,整個結構都會消失。那麼在特定高度點的任何解決方案?

對於網站來說,圖像問題和寬度高度100%問題都很重要。所以需要你的指導。

+1

不要與該服務共享文件。通過Stack Overflow的界面將它上傳到imgur。 – alex

+0

@alex多數民衆贊成最低10代表服務 –

+1

@RichardTingle我懷疑同樣多。儘管如此,RapidShare仍然是一個可怕的服務來分享圖像。用戶可以隨時手動上傳到imgur並鏈接到它(我認爲這是允許的)。 – alex

回答

0

HTML結構以供參考:

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

我做this例如你用純CSS。

現在讓我解釋我是如何做到的。

我拿一個容器,設置它的尺寸和相對位置。

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

如果將容器內的所有overflow: hidden元素將被截斷,他們不能展開父之外。

之後,我把3跨度放在容器中,它們是內聯元素,所以我不能設置它們的widthheight。爲此,我將其display:屬性設置爲inline-block。現在我可以給span一個維度。

span位於absolute的位置,因爲我希望跨度能夠重疊。

對於之後的絕對位置使用z-index

3 span 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); 
} 

其中偏斜屬性與應用於跨度的截然相反。與此同時,我保持img與標準的形狀沒有歪斜。 (試圖刪除在jsfiddle演示中看到)

所以我希望我很清楚。對於一切發表評論!

第二UPDATED SOLUTION:

寬度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; 
} 

反正羅伊,記住,在計算器你可以問的東西,但你也必須與實踐給你的答案。這是你真正能學到東西的唯一方法。

+0

是你想要的解決方案嗎? – rkpasia

+0

我剛剛發佈了關於同樣的問題。到目前爲止,你已經做了很大的幫助。所以我希望你的最終指導能夠幫助我排除以下問題。我還給你一個關於100%寬度問題的jsfiddle鏈接。圖像與形狀一起傾斜。所以我希望圖像不像形狀那樣傾斜。 – roy712

+0

http://jsfiddle.net/swati712/XQNzu/這是jsfiddle鏈接。請看看你是否有時間。我的網站將是100%,因此我給出了100%的寬度。然後整個事情搞糟了。 – roy712