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

时间:2022-07-26
本文章向大家介绍纯 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;
}

随机文章
WEB前端知识点必读
最近更新