2

http://nicolasgallagher.com/pure-css-gui-icons/demo/のように、純粋なCSSで作成できる形状はたくさんあり、常に1つの要素を記述します（ここ<li>）。

ただし、 http：//www.gentegeek.com/proyectos/html-css-space-invaders/のように、もう少し複雑な形状が必要な場合は、多くを配置する必要があります<div>（ソースコードを参照）。

1つの要素だけで形状を作成できますか？はいの場合、どのように？

4

1 に答える 1

4

はい！--CSS3を使用

ただし、ほとんどの場合、努力する価値はありません。基本的に、十分な先見性と忍耐力があれば、を使用して実質的にすべてのピクセルベースの形状（例のように）を「ペイント」できますlinear-gradient。

これがフィドルです。（画像領域自体の透明性を可能にするために更新されました）。

divコードは（リクエストごとに）単一の要素です。cssは次のとおりです（ここに同等のベンダープレフィックスをすべて掲載しているわけではありません）。

div {
    width: 240px;
    height: 160px;
    background-repeat: no-repeat;
    background-position: 0 0, 0 20px, 0 40px, 0 70px, 0 90px, 0 100px, 0 120px, 0 140px;
    background-size: 240px 20px, 240px 20px, 240px 30px, 240px 20px, 240px 10px, 240px 20px, 240px 20px, 240px 20px;
    background-image:
        linear-gradient(left, transparent 0px, transparent 40px, #000 41px, #000 60px, transparent 61px, transparent 180px, #000 181px, #000 200px, transparent 201px, transparent 240px ),
        linear-gradient(left, #000 0px, #000 20px, transparent 21px, transparent 60px, #000 61px, #000 80px, transparent 81px, transparent 160px, #000 161px, #000 180px, transparent 181px, transparent 220px, #000 221px, #000 240px),
        linear-gradient(left, #000 0px, #000 20px, transparent 21px, transparent 40px, #000 41px, #000 200px, transparent 201px, transparent 220px, #000 221px, #000 240px),
        linear-gradient(left, #000 0px, #000 60px, transparent 61px, transparent 80px, #000 81px, #000 160px, transparent 161px, transparent 180px, #000 181px, #000 240px),
        linear-gradient(left, #000, #000),
        linear-gradient(left, transparent 0px, transparent 20px, #000 21px, #000 220px, transparent 221px, transparent 240px ),
        linear-gradient(left, transparent 0px, transparent 40px, #000 41px, #000 60px, transparent 61px, transparent 180px, #000 181px, #000 200px, transparent 201px, transparent 240px ),
        linear-gradient(left, transparent 0px, transparent 20px, #000 21px, #000 40px, transparent 41px, transparent 200px, #000 201px, #000 220px, transparent 221px, transparent 240px );
}
于 2012-07-06T13:29:01.550 に答える