网格形状图标

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

如果使用伪元素: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>

小提琴