Question

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

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

CSS icons with a grid shape

.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>

FIDDLE

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

您可以在此处使用单个元素，而无需在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 4

使用:before和:after，您可以创建另外两个＆＃34;框＆＃34;玩。

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/

网格形状图标

4 个答案: