纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

那我来为您详细讲解纯CSS制作各种各样的网页图标的完整攻略。

简介

CSS是一种强大的样式语言，可以用来为网站添加各种复杂和简单的效果，其中包括网页图标。使用CSS制作网页图标的好处是可以减少对图像的依赖，并且减少页面加载时间。这个过程中一般使用伪元素和CSS属性来控制样式。

纯CSS制作三角形

制作三角形可以用CSS的border属性，将三角形看做一个小数矩形，然后通过旋转或反转的方式将其最后变成三角形。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid #f00;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}

实现了一个等腰直角红色三角形，通过类似方法可以制作圆角、等边、等腰三角形。

纯CSS制作暂停按钮

为了制作暂停按钮，我们可以使用CSS的伪元素和CSS动画实现。 当我们为元素添加:hover、:active或:focus类时，按钮的样式将根据情况改变。

.pause-button {
  position: relative;
  width: 70px;
  height: 70px;
  display: inline-block;
  cursor: pointer;
}
.pause-button:before,
.pause-button:after {
  position: absolute;
  content: '';
  width: 25px;
  height: 70px;
  top: 0;
  background-color: #f00;
}
.pause-button:before {
  left: 0;
}
.pause-button:after {
  right: 0;
}
.pause-button:hover:before {
  transform: translateX(-25px);
}
.pause-button:hover:after {
  transform: translateX(25px);
}

这里我们创建一个class为.pause-button的div，并将其宽高设置为70px。 之后我们使用伪元素:before和:after来创建两条竖杠，它们与div的宽度相等，背景颜色为#f00。在鼠标悬停在按钮上时，使用CSS的transform属性来实现竖线的移动效果，从而实现暂停按钮的操作。

纯CSS制作下载箭头

制作下载箭头很简单，和制作三角形的方法类似，这里在三角形的基础上在下部加了一条横线，并且把左、右侧的三角形旋转90度。

.download-arrow {
  position: relative;
  width: 50px;
  height: 50px;
  border-top: 15px solid #f00;
  border-bottom: 15px solid #f00;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
.download-arrow:after {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f00;
}
.download-arrow:before, .download-arrow:after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border-top: 15px solid #f00;
  border-right: 15px solid #f00;
  border-left: 15px solid transparent;
  border-bottom: 15px solid transparent;
  transform: rotate(90deg);
}

纯CSS制作加号

制作加号也比较简单，相当于将两个直角三角形通过旋转叠加在一起。

.add-icon {
  position: relative;
  width: 50px;
  height: 50px;
}
.add-icon:before,
.add-icon:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 5px;
  background-color: #f00;
}
.add-icon:before {
  top: 22px;
  left: 18px;
  transform: rotate(90deg);
}
.add-icon:after {
  top: 18px;
  left: 22px;
}

总结

使用CSS制作网页图标是一种便捷且有趣的方法，可以不用添加任何图片就能给网站添加一些美观和特别的元素。 在大多数情况下，使用CSS可以大大减少页面负担。 我们可以使用动画、变形等CSS特性使网站图标更生动。