网格形状图标

Question

编写一个使用 CSS 定义图标的应用程序，避免依赖外部图像文件。这适用于圆形、正方形、三角形、菱形，这几乎足够了。

我想知道是否可以使用 CSS 创建稍微复杂一点的图标，比如右边的两个网格形状的图标？它不需要支持IE8。

.icon {
  height: 20px;
  width: 20px;
  background-color: steelblue;
  display: inline-block;
}
.icon-circle {
  border-radius: 10px;
}
.icon-square {
  border-radius: 0
}

<div class="icon icon-circle"></div>

Answer 1

在box-shadow 的帮助下，您可以在此处使用单个元素，而无需实际使用伪元素。

所以，假设你有一个方形 div 元素：

div {
  height: 20vw;
  width: 20vw;
  background: tomato;
}

<div></div>

---

然后您可以使用以下方法添加一个没有散布的盒子阴影：

div {
  height: 20vw;
  width: 20vw;
  background: tomato;
  box-shadow: 21vw 0 tomato;
}

<div></div>

---

您甚至可以使用, 分隔多个盒子阴影：

div {
  height: 20vw;
  width: 20vw;
  background: tomato;
  box-shadow: 21vw 0 tomato, 0 21vw tomato, 21vw 21vw tomato;
}

<div></div>

---

你甚至可以重叠它们：

div {
  height: 20vw;
  width: 20vw;
  background: tomato;
  box-shadow: 21vw 0 tomato, 0vw 21vw tomato, 16vw 21vw tomato, 21vw 21vw tomato;
}

<div></div>

---

因此，创建此类不会对浏览器兼容性或伪元素（可用于其他目的）造成过度负担。

div {
    height:20vw;
    width:20vw;
    background:tomato;
    box-shadow:0 0 0 tomato;
    -webkit-animation: boxshadowmult 8s infinite;
    animation: boxshadowmult 8s infinite;
}
@-webkit-keyframes boxshadowmult {
    0%, 24% {
        box-shadow:0 0 0 tomato;
    }
    25%, 49% {
        height:20vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato;
    }
    50%, 74% {
        height:10vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
    }
    75%, 100% {
        height:10vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
    }
}
@keyframes boxshadowmult {
    0%, 24% {
        box-shadow:0 0 0 tomato;
    }
    25%, 49% {
        height:20vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato;
    }
    50%, 74% {
        height:10vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
    }
    75%, 100% {
        height:10vw;
        width:10vw;
        box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
    }
}

/*demo only*/
html{height:100%;
    background: rgb(79,79,79); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(79,79,79,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

<div></div>

Answer 2

这是另一种使用渐变而不是伪元素来实现形状的方法。您可以调整背景大小以产生不同的效果（例如 shape3）。

与伪元素方法相比，这种方法的优点是它不需要任何额外的真实/伪元素，但缺点是浏览器对线性渐变的支持与伪元素相比仍然很差。

div {
  margin: 10px;
  height: 50px;
  width: 50px;
  background-color: steelblue;
  transition: all 1s;
}
.shape1 {
  background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
  background-size: 100% 50%, 50% 100%;
}
.shape2 {
  background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
  background-size: 100% 50%, 50% 50%, 100%, 100%;
  background-repeat: repeat-y, repeat-x;
}
.shape3{
  background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
  background-size: 100% 50%, 50% 50%, 100%, 100%;
  background-position: 0% 0%, 0% 100%, 0% 0%;
  background-repeat: repeat-y, repeat-x;
}
.shape4 {
  background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
  background-size: 100% 25%, 25% 100%;
  background-position: 0% 100%, 100% 100%;
  background-repeat: repeat-y, repeat-x;
}
.large {
  height: 150px;
  width: 150px;
}

/* Just for demo */

div {
  float: left;
}
.small{
  clear:both;
}
div:hover {
  background-color: crimson;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape1 small"></div>
<div class="shape1 large"></div>
<div class="shape2 small"></div>
<div class="shape2 large"></div>
<div class="shape3 small"></div>
<div class="shape3 large"></div>
<div class="shape4 small"></div>
<div class="shape4 large"></div>

Answer 3

如果你使用伪元素:before 和:after，你可以使这些图标没有图像。你甚至可以让它们响应式（见我的小提琴）。

我使用伪元素来创建“白线”，这样您就可以像这样制作两个最后一个图标：

div {
  width: 20%;
  padding-bottom: 20%;
  margin: 5% 10%;
  background-color: #6095C9;
  position: relative;
  float: left;
}
div:after,
div:before {
  content: "";
  position: absolute;
  background-color: #fff;
}
.one:before,
.two:before {
  margin: 0 48%;
  width: 4%;
  height: 100%;
}
.one:after,
.two:after {
  margin: 48% 0;
  height: 4%;
  width: 100%;
}
.two:before {
  height: 50%;
  bottom: 0;
}

<div class="one"></div>
<div class="two"></div>

FIDDLE

Answer 4

使用:before 和:after，您可以再创建两个“盒子”来玩。

JSFiddle Demo

.icon {
    width: 200px;
    height: 95px;
    background: blue;
}
.triple-square {
    position: relative;
    margin: 0 0 105px 0;
    border-radius: 5px;
}
.triple-square:before {
    content: " ";
    position: absolute;
    bottom: -105px;
    left: 0;
    height: 95px;
    width: 95px;
    background: blue;
    border-radius: 5px;
}
.triple-square:after {
    content: " ";
    position: absolute;
    bottom: -105px;
    right: 0;
    height: 95px;
    width: 95px;
    background: blue;
    border-radius: 5px;
}

这是另一个在三角形中创建 3 个圆的示例...

http://jsfiddle.net/RrhxN/1/