将 CSS 三角形添加到小部件 div [重复]

【问题标题】：Adding CSS triangle to a widget div [duplicate]将 CSS 三角形添加到小部件 div [重复]
【发布时间】：2017-01-04 06:23:39
【问题描述】：

我想在包含小部件标题的 div 的背景上制作一个透明箭头。

期望的输出：

如果图像不起作用，您可以在此站点上查看小部件部分及其标题：http://moneyrope.com/ - 有问题的小部件的标题为“Latest Money Tips” - （请原谅混乱。不是一个完成的网站。只是一个测试/登台环境）。

CSS：

.latest-heading {
    background: #53386f none repeat scroll 0 0;
    color: #fff;
    margin-bottom: 2%;
    padding: 2%;
    text-align: center;
}

非常感谢您。

【问题讨论】：

抱歉，我进行了搜索，但没有找到您链接的那个。此外，该解决方案对我不起作用。

标签： css css-shapes

【解决方案1】：

您可以使用:after 伪类来添加此箭头。

这是一个工作示例：

.latest-heading {
    background: #53386f none repeat scroll 0 0;
    color: #fff;
    margin-bottom: 2%;
    padding: 2%;
    text-align: center;
}
.latest-heading:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #53386f;
  content: '';
  position: absolute;
  left: calc(50% - 20px);
  top: 48px;
}

&lt;div class="latest-heading"&gt;1&lt;/div&gt;

【讨论】：

感谢德克尔的回答。不幸的是，它显示在实际页面中元素的上方。如果我把 top:48px 拿出来，那么它会在理想位置上方显示几个 PX，但我就是不知道如何到达那里。
您可以将position:relative 添加到 .最新标题类