CSS: 中间有凹陷的三角形

Question

我想给 this triangle 一个中间点，我不想要任何额外的 HTML。

<span class="dropdown">dropdown</span>

.dropdown:after
{
    display: inline-block;

    margin-left: 4px;

    content: '';

    border-top: 5px solid rgba(0,0,0,.2);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

想要的结果

我该怎么做？

Answer 1

试试这个：

.dropdown:after {
  display: inline-block;
  position: relative;
  content: "";
  top: -2px;
  right: 0;
  margin-left: 4px;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-right: 2px solid rgba(0,0,0,.2);
  border-bottom: 2px solid rgba(0,0,0,.2);
}

Fiddle here

请注意，还有其他选项，即图标字体、背景图片等。

Answer 2

仅使用 CSS 我不确定如何在箭头上创建圆形末端。但是要创建带线箭头，您可以将 :before 和 :after 元素叠加在一起，如下所示：

.dropdown {
  position: relative;
}
.dropdown:after {
  position: absolute;
  right: -12px;
  top: 7px;
  content: '';
  border-top: 3px solid rgb(255, 255, 255);
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  z-index: 1001;
}
.dropdown:before {
  position: absolute;
  right: -14px;
  top: 7px;
  content: '';
  border-top: 5px solid rgb(0, 0, 0);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  z-index: 1000;
}

<span class="dropdown">dropdown</span>

CSS: 中间有凹陷的三角形

CSS: Triangle with a dip in the middle

css

css-shapes