CSS 形状入门（二）

上次讲了一些基本的 CSS 形状，实际的网页当中当然不只是这些普通的三角形，还有很多复杂一点的图形，比如搜索框中的放大镜等等，这时为了不添加额外元素就要用到伪元素 ::before 和 ::after。

什么是伪元素##

简而言之，伪元素会在内容元素的前后插入额外的元素，但这些元素实际上并不在文档中生成，它们在外部可见但是你将不会在源代码中找到它们，因此，实际上它们是“虚假”的元素。

使用伪元素绘制图标##

让我们先来绘制一个放大镜的图标，最后的结果如下图所示：

先绘制一个圆圈，很简单：

#magnifier {
    position: relative;
    width: 50px;
    height: 50px;
    border: 5px solid red;
    border-radius: 999em;
}

那放大镜的手柄怎么办呢，在不添加元素的情况下用伪元素就很容易做到：

#magnifier::before {
    content: "";
    position: absolute;
    left: 45px;
    top: 45px;
    width: 40px;
    height: 10px;
    background-color: red;
    -webkit-transform-origin: 5px 5px;
    transform-origin: 5px 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

再来绘制一个复杂一点的，图片图标：

先绘制一个外框：

#image {
    position: relative;
    width: 100px;
    height: 80px;
    border: 5px solid red;
    overflow: hidden;
}

再用 ::before 伪元素绘制太阳：

#image::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 999em;
    background-color: red;
}

那剩下的两座山怎么办呢，只剩下一个 ::after 伪元素了，可以用 box-shadow 加旋转来解决：

#image::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 50px;
    width: 60px;
    height: 60px;
    background-color: red;
    box-shadow: 45px 25px 0px 0px red;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

这次就先说到这里，下次再讨论更更更复杂的图形。