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元素叠加在一起，如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;