創建傾斜/不規則形狀div

我想知道是否可以使用CSS3創建此類型的div形狀。創建傾斜/不規則形狀div

example

我知道你可以使用邊框的做的事情，如this，但反正是有得到這樣的邊界圖像中（跨越的div他整個頂部和底部） - 和獎金點，爲它做它響應（％寬度？）

.cornered { 
    width: 160px; 
    height: 0px; 
    border-bottom: 40px solid red; 
    border-right: 40px solid white; 
}

的任何鏈接，小提琴，建議將不勝感激。

來源

2013-10-07 Jon Kyte

[裁剪和遮掩使用CSS（http://www.hongkiat.com/blog/css-masking/） – Itay

你可以使用你所提到的CSS三角形技術，然後將它夾。 – ediblecode

[我怎樣才能用css3和html5製作不規則形狀的div？]（http://stackoverflow.com/questions/12126731/how-can-i-make-a-div-with-irregular-shapes -with-css3-and-html5） – TylerH

正如我在評論中提及，我創建了一個傾斜三角形（如果去掉填充CSS，你會看到），然後添加填充，使你不能看到三角形的尖端，

.cornered { 
    width: 160px; 
    height: 0px; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 280px solid blue; 
    padding:60px; 
}

Fiddle

來源

2013-10-07 11:40:23 ediblecode

這隻適用於修正寬度嗎？在我的這個實現中，我需要它來展開整個頁面，用隱藏的「clip」溢出的三角形的末端（隱藏溢出）。對此有何想法？ –

不幸的是，你不能在剪輯或邊框中使用基於％的值。因此，我認爲不可能爲您創建一個僅用於CSS的解決方案。但是，使用jQuery，你可以手動設置px值在頁面加載和調整大小？ – ediblecode

隨着你更新的小提琴，我玩了一圈，只是決定設置我的網頁的最高寬度（1200px），然後將它放在一個容器中，用「overflow：hidden;'這給了我需要的效果。非常感謝你的幫助！ http://jsfiddle.net/2ExQK/3/ –

你能做到這一點

CSS

.irregular-shape { 
      border-left: 1500px solid black; 

      padding: 50px; 
      border-top: 100px solid transparent; 
      border-bottom: 100px solid transparent; 
     }

標記

<div class="irregular-shape"></div>

來源

2013-10-07 11:42:51

創建傾斜/不規則形狀div

回答

相關問題