我想製作一個矩形(最好不使用畫布或背景圖像),看起來有點像下圖中的藍色框。請注意,該形狀具有不規則的邊緣。不規則的矩形形狀
我該如何實現它?
div {
background: blue;
width: 400px;
height: 120px;
}
我想製作一個矩形(最好不使用畫布或背景圖像),看起來有點像下圖中的藍色框。請注意,該形狀具有不規則的邊緣。不規則的矩形形狀
我該如何實現它?
div {
background: blue;
width: 400px;
height: 120px;
}
您正在尋找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>
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這個工具使得製作自定義形狀的過程變得更容易管理。
你有固定點,這不利於縮放 – iXCray
我只是展示了這個想法,(我實際上是從某個網站上拉出了這個片段)這個想法仍然是重要的,你可以將它轉換根據需要擴展到可擴展模型。 – DMrFrost
終於有人真的讀到這個問題。謝謝!將研究這一點。 – user2952238
究竟是你面臨的問題還是你想問的問題,因爲你所做的只是告訴我們你想要做什麼。 – csmckelvey
很酷。然後讓它:) –
問題是,我不知道從哪裏開始。我不想使用背景圖片 - – user2952238