CSS：中间有一个倾角的三角形[重复]答案

【问题标题】：CSS: Triangle with a dip in the middle [duplicate]CSS：中间有一个倾角的三角形[重复]
【发布时间】：2015-07-20 00:28:17
【问题描述】：

我想让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;
}

想要的结果

我该怎么做？

【问题讨论】：

标签： css css-shapes

【解决方案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

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

【讨论】：

【解决方案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;
}

&lt;span class="dropdown"&gt;dropdown&lt;/span&gt;

【讨论】：