2017-08-01 19 views
-5

私は、下の画像の青色のボックスのように見える矩形(キャンバスや背景の画像を使用しないことが望ましい)を作りたいと思います。形状に不規則なエッジがあることに注意してください。不規則な長方形の形

どうすれば実現できますか? CSS Masking on html5rocks.com

。また、ここでのユースケースとの良好な説明です:Creating Non-Rectangular Layouts With CSS Shapes

あなたはできますが、CSSマスキングし、ここでシェイプモジュール

掘るを探している

enter image description here

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

あなたがやっていることは、あなたがやろうとしていることを教えてくれるからです。 – csmckelvey

+6

Cool。次にそれを作ってください:) –

+0

問題はどこから始めるのか分かりません。私は背景画像を使用したくありません。 – user2952238

答えて

5

必要な図形を作成し、イメージ、背景、テキスト、別のフォームなど、必要なものに適用します。さらに、それをアニメーション化することもできます!すべてのブラウザは、現時点ではそれをサポートするかもしれないことを、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>

+0

長方形によく一致するコードが更新されました – iXCray

+0

ありがとうございました。私はボックスをしたくない場合はどうすればいいですか?青だけ。 – user2952238

+0

次に、ボックスを使用せず、スニペットを追加しました – iXCray

1

の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について、カスタムシェイプをより管理しやすくするプロセスを説明しています。

+0

あなたは固定小数点を持っていますが、それはスケーリングには向いていません – iXCray

+0

私はちょうどそのアイデアを実演していました(私はsomeonesのウェブサイトからその抜粋を実際に取り出しました)必要に応じてスケーラブルなモデルに変換できます。 – DMrFrost

+0

最後に、実際に質問を読む人。ありがとう!これを調べます。 – user2952238

関連する問題