[分享]css制作播放器图标

CSS能够制作各种精美的图标，其中包括播放器图标。下面我们就来介绍一下如何使用CSS制作播放器图标。/ 调整播放器图标的宽高 / .playicon { width: 24px; height: 24...

CSS能够制作各种精美的图标，其中包括播放器图标。下面我们就来介绍一下如何使用CSS制作播放器图标。

/* 调整播放器图标的宽高 */
.play-icon {
  width: 24px;
  height: 24px;
}

/* 绘制播放三角形 */
.play-icon::before {
  content: "";
  display: inline-block;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #fff;
  margin-right: 5px;
}

/* 绘制播放条 */
.play-icon::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 12px;
  background-color: #fff;
  margin-left: 2px;
}

上面的代码中，我们使用了伪元素（:before和:after）来绘制播放器图标。在:before伪元素中，我们使用border属性绘制了一个等腰三角形。在:after伪元素中，我们设置了宽高和背景颜色，绘制出了一个矩形条。

最终，通过对宽高和颜色的调整，我们得到了一个精美的播放器图标。