只有一个元素的CSS空间入侵者

Question

我们可以使用纯CSS制作很多形状，例如在http://nicolasgallagher.com/pure-css-gui-icons/demo/中，你总是写一个元素（这里是<li>）。

但是如果我们想要更复杂的形状，比如http://www.gentegeek.com/proyectos/html-css-space-invaders/，我们必须放置很多<div>（参见源代码）。

我可以只用一个元素制作形状吗？如果是，怎么样？

Answer 1

是！ - 使用CSS3

但是，在大多数情况下，这可能不值得。 基本上，考虑到足够的预见和耐心，你几乎可以“画出”任何基于像素的形状（如你的例子）使用linear-gradient。

Here is a fiddle。 （更新以允许图像区域本身的透明度。）

代码是单个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 );
}