纯 CSS 实现下拉菜单尖角图标（实心+空心）

一、下拉实心尖角标

实现代码：

<div class="angle" />

.angle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
}

二、下拉空心尖角标

实现代码：

<div class="angle" />

.angle {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top-width: 0;
  border-bottom-color: #000;
  border-width: 10px;
}
.angle::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  content: " ";
  border-width: 10px;
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
  border-bottom-color: #fff;
}

纯 CSS 实现下拉菜单尖角图标（实心+空心）

原文：https://www.cnblogs.com/Leophen/p/13746699.html