2

私は、単一の画像を使用せずにWebサイトを開発することに挑戦しました。私は主にアイコンフォントを使用しますが、このパーティクルグラフィックでは、divまたは他の要素を使用して、cssでスタイルを設定するよりも、境界線などを指定できると思いました...しかし、私ほど簡単ではないことがわかりました。考えて、私はそれを達成することはできません。

最終結果として取得する必要があるものは次のとおりです。

ここに画像の説明を入力してください

対角線に興味があります。背景は無視してください。htmlまたはcssの助けを借りてそのような行を複製する方法はありますか？

4

3 に答える 3

5

cssを使用して、あなたが求めることを行うことができますbackground-image: repeating-linear-gradient()

Lea Verou には素晴らしいギャラリーがあります: http://lea.verou.me/css3patterns/

斜めストライプパターンを変更して、必要なものを取得できます。

于 2012-12-22T12:06:37.060 に答える
0

これを試してみてください、 http://www.patternify.com/ U はここでそのようなパターンを作成し、それを CSS に変換して背景に使用できます。

于 2012-12-22T11:52:16.893 に答える
0

Hope this helps you get started..!! フィドルのデモはこちら..

HTML

<body>      
        <div class="myDiv"></div>        
        <div class="myDiv"></div>
        <div class="myDiv"></div>        
        <div class="myDiv"></div>        
        <div class="myDiv"></div>
        <div class="myDiv"></div>        
        <div class="myDiv"></div>
        <div class="myDiv"></div>                
</body>​

CSS

.myDiv {
background-color: none;
border: solid 2px #AAA;
margin: 30px;
height: 5px;
-webkit-transform: rotateZ(115deg); // Chrome
-moz-transform: rotateZ(115deg) // Mozilla Firefox
}
于 2012-12-22T12:41:29.620 に答える