純 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;
}