只有一个元素的 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 );
}