用Clipped overflow創建一個'trapezium'形div

我想知道如果有人知道如何儘可能地使用CSS/Html/Canvas來創建一個梯形。用Clipped overflow創建一個'trapezium'形div

我試圖把散列一起排列在一起，只有它非常混亂，並且在現實世界中將無法使用。

div { 
width:0; 
margin-left:-1000px; 
height:100px; 
border-right:1000px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 
}

我的繼承人的jsfiddle ...

http://jsfiddle.net/Liamatvenn/WWYYM/

來源

2013-11-26 Liam

爲什麼你做了什麼不可？你究竟想要完成什麼？你的小提琴似乎在做你正在尋找的東西。 – sn3ll

@ sn3ll：OP想要的是當文本內容在梯形外流動時「夾」（隱藏）。 – ScottS

這是不可用的，因爲尺寸必須是靜態的，而且它們很難改變（這裏不是簡單的寬度+高度）。 – tybro0103

我不`噸知道你想要什麼。所以我想這會幫助你一點。

div { 
    width:0; 
    margin-left:-100px; 
    height:100px; 
    border-right:100px solid lightblue; 
    border-top:60px solid transparent; 
    border-bottom:60px solid transparent; 
    padding-left:100px; 
    white-space:no-wrap; 
}

來源

2013-11-26 17:39:31 singhiskng

默認情況下，'div'是'display：block'，所以它什麼都不做。 – ScottS

是的，你說得對，對不起。 – singhiskng

你是否在爲這樣的事情發言？檢查這個小提琴：jsfiddle.net/WWYYM/3/。請讓我知道這對你有沒有用。我已經編輯好類似於下面的代碼：

div { 
    border-bottom: 100px solid lightblue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 500px; 
    white-space:no-wrap; 
    text-align:center; 
}

來源

2013-11-26 17:42:38

可以另外變換都低於：

 

div { 
width:0; 
margin-left:-50px; 
margin-top: -500px; 
height:100px; 
border-right:100px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 

transform:rotate(20deg); 
-ms-transform:rotate(20deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); 
 

}

來源

2013-11-26 20:15:59

我可以用2周額外的div作爲包裝做到這一點。

CSS

.trapezium { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

.trapezium > div { 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(-12deg); 
    overflow: hidden; 
} 

.trapezium > div > div { 
    font-size: 60px; 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: -30px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
}

demo

來源

2013-11-26 21:09:30 vals

謝謝@Vals，我認爲這樣就好，我可能不得不使用一些.png，因爲它也將成爲一個流動網站 - 只是想問一下它是否可行，非常感謝您的意見。 – Liam

用Clipped overflow創建一個'trapezium'形div

回答

相關問題