CSS：図形で背景を作成していますか？

Question

CSSを使って完全に画像のような背景を作成することが可能かどうか疑問に思っていますか？

これを行うオンラインツールで、CSSコードを教えてください。

この影響が正直で何を呼び出すのかわからないので、私はそれを何と呼ぶべきか分かりません。

これはイメージです。

任意の助けをいただければ幸いです。

Answer 1

JSとCanvasのすべての回答に、CSSでこれを行うことができるかもしれないと付け加えたいと思います。もちろん、膨大な労力を要します。

背景グラデーションを使用すると、必要な数のオーバーレイ画像を作成できます。 この例を参照してください： http://lea.verou.me/css3patterns/#japanese-cube

Answer 2

私はあなたがCSSだけでこれを達成できるとは思わないが、here is an online toolあなたのウェブサイトで使用されるSVGまたはPNGを保存することができます。あなたは理論的にはrepo on github

Answer 3

をチェックアウトすることができ、コードを変更したい場合は、他のdivsの数でdivを記入してからtransformを使用して、それらを変換することができます。次に、「背景」の上に実際のコンテンツを追加することができますdiv。

説明付きの実例はhereのように見えます。再び、これは非常に非実用的であり、例えば、画像編集ソフトウェアのバックグラウンドをもっと簡単にすることができます。

Answer 4

正確な画像がCSSを使用して再現可能かどうかわかりません。しかし、CSS3の背景グラデーションを使用して、多くのグラフィックパターンを作成することができます。

例の多くはリー・ベルーのブログで見ることができます：http://lea.verou.me/css3patterns/

例複雑なCSSの背景グラデーションの場合：

.pattern { 
 
    width: 40em; 
 
    height: 15em; 
 
    
 
    background-color:#556; 
 
    background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
 
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
 
    linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
 
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 
 
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
 
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 
 
    background-size:80px 140px; 
 
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 
 
}

<div class="pattern"></div>