Skip to main content

CSS 下拉尖角标实现汇总

一、下拉实心尖角标​

1、向上的实心尖角标​

实现代码：

<div class="angle" />
.angle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #999;
}

实现效果：

2、向右的实心尖角标​

实现代码：

<div class="angle" />
.angle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #999;
}

实现效果：

3、向下的实心尖角标​

实现代码：

<div class="angle" />
.angle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #999;
}

实现效果：

4、向左的实心尖角标​

实现代码：

<div class="angle" />
.angle {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #999;
}

实现效果：

二、下拉空心尖角标​

1、向上的空心尖角标​

实现代码：

<div class="angle" />
.angle {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top-width: 0;
  border-bottom-color: #999;
  &::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: var(--ifm-background-color); // 这里颜色需与箭头背景色一致
  }
}

实现效果：

2、向右的空心尖角标​

实现代码：

<div class="angle" />
.angle {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-right-width: 0;
  border-left-color: #999;
  &::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: " ";
    border-width: 10px;
    right: 1px;
    margin-top: -10px;
    border-right-width: 0;
    border-left-color: var(--ifm-background-color);
  }
}

实现效果：

3、向下的空心尖角标​

实现代码：

<div class="angle" />
.angle {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-bottom-width: 0;
  border-top-color: #999;
  &::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: " ";
    border-width: 10px;
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: var(--ifm-background-color);
  }
}

实现效果：

4、向左的空心尖角标​

实现代码：

<div class="angle" />
.angle {
  position: fixed;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-left-width: 0;
  border-right-color: #999;
  &::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    content: " ";
    border-width: 10px;
    left: 1px;
    margin-top: -10px;
    border-left-width: 0;
    border-right-color: var(--ifm-background-color);
  }
}

实现效果：

三、下拉尖角阴影的实现​

由于下拉尖角是通过 border 来实现的，无法直接通过 box-shadow 来添加阴影，可以通过 filter 的 drop-shadow 来实现：

实现代码：

<div class="angle" />
.angle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--ifm-background-color);
  filter: drop-shadow(0 -6px 2px rgba(0, 0, 0, 0.1));
}

实现效果：

实现效果各方向与上面实心的方向一致。