不規則的矩形形狀

Question

我想製作一個矩形（最好不使用畫布或背景圖像），看起來有點像下圖中的藍色框。請注意，該形狀具有不規則的邊緣。

我該如何實現它？

div { 
    background: blue; 
    width: 400px; 
    height: 120px; 
} 

Answer 1

您正在尋找CSS屏蔽和形狀模塊

喜歡在這裏：CSS Masking on html5rocks.com

而且，這裏是用例一個很好的解釋：Creating Non-Rectangular Layouts With CSS Shapes

你可以創建你想要的任何形狀，將其應用於任何你想要的：圖像，背景，文字，另一種形式 - 沒有限制。而且，你可以製作它的動畫！

這裏是一個良好的服務來裁剪這樣的事情與鼠標：http://bennettfeely.com/clippy/

注意，並不是每一個瀏覽器可以支持目前的樣子：http://caniuse.com/css-clip-path/embed

是的，沒有任何SVG或圖像所需 - 靈活，動態的，唯一的CSS技巧。

.box{ 
 
    width: 400px; height: 120px; background:black; position:relative 
 
} 
 
.poly{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background:#2abcd0; 
 
    -webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%); 
 
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%); 
 
}

<div class="box"> 
 
<div class="poly"></div> 
 
</div>

而且沒有黑盒子：

.poly{ 
 
    width:400px; 
 
    height:120px; 
 
    background:#2abcd0; 
 
    -webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%); 
 
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%); 
 
}

<div class="poly"></div>

Answer 2

Div的是，一直都是矩形。儘管如果您有時間單獨使用座標進行追蹤，您可以製作一些複雜的形狀。查看this page獲取可以輕鬆放置在一起的形狀列表，並使用這些相同的構思可以構建自己更復雜的形狀。

你最終可能會像...

shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px); 

看看這個tutorial爲好。她談到shapses to poly這個工具使得製作自定義形狀的過程變得更容易管理。