CSS：中间倾斜的三角形

Question

我想让这个三角形在中间倾斜，并且我不需要任何额外的 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);
}

在这里摆弄

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