使自定義形狀的DIV + CSS HTML

我試圖與以下形狀的股利，但沒有成功。這裏是我做了什麼 Fiddle 使自定義形狀的DIV + CSS HTML

這裏是到目前爲止的代碼。

.skew { 
    display: inline-block; 
    background-color:black;  
    height: 120px; 
    width: 360px; 
    margin-top: 100px; 
    -webkit-transform: skewY(-11deg); 
    -moz-transform: skewY(-11deg); 
    -ms-transform: skewY(-11deg); 
    -o-transform: skewY(-11deg); 
    transform: skewY(-11deg); 
    overflow:hidden; 
}

任何解決方案表示歡迎

來源

2014-03-28 user3449520

這些照片是在小提琴內，因爲現在它不讓我發佈照片 – user3449520

聽起來像[svg]（http://en.wikipedia.org/wiki/Scalable_Vector_Graphics）問題。 –

它不能用CSS或HTML完成？我不介意使用照片作爲背景，如果我把一張照片，我只想蓋上標記節。任何幫助？ – user3449520

基本未經測試方法（如果我理解正確你的想法）：

HTML：

<div class="skew-container"> 
    <div class="img-container"></div> 
</div>

CSS：

.skew-container { overflow: hidden; background: url(/images/skew.png) no-repeat scroll 0 0 transparent; height: 175px; width: 484px; } 
.img-container { height: 100%; width: 100%; } 
.img-container img { width: 100%; }

JS：

現在，對於JavaScript，您可以做很多事情。但我不確定您是否想要移動其中一幅圖像。看看我的小骰子游戲。你願意去兔洞多遠？ http://jsfiddle.net/tive/GcDAb/

該示例中顯示的方法是具有所有骰子值和顏色的大圖像。使用background-position到CSS來移動圖像是數學的，就像矩陣一樣。有點瀏覽器不一致，但仍然可行。

來源

2014-03-28 01:24:34

不完全是我正在尋找的。問題是，圖像必須只覆蓋和所有標記區域。任何想法？ – user3449520

你在說鞋子電視嗎？創建一個PNG，給它一個背景顏色，繪製你的鞋子，並使其透明。這樣就不需要JS了。 –

標記區域是鞋的中間部分。它不是整個鞋，這就是爲什麼我需要一個形狀的div – user3449520

你需要使用3D &地審視自己的測試：

body { 
    transform-style: preserve-3d; 
    perspective:50px; 
}

與僞的幫助下，你可以做這樣的事情：http://jsfiddle.net/FCVa7/3/

需要調整您的需求... 。

但最好是看SVG，讓您的形狀，然後你可以從樣式表他們的風格

來源

2014-03-28 02:34:40

使自定義形狀的DIV + CSS HTML

回答

相關問題