css - 只有一个元素的 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.

这是一个小提琴。（更新以允许图像区域本身的透明度）。

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