将CSS三角形添加到小部件div

Question

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

期望的输出：

如果图片无效，您可以在此网站上看到小部件及其标题：http://moneyrope.com/ - 相关小部件的标题为“＃34;最新资金提示＆＃34; - （原谅一塌糊涂。不是一个完成的网站。只是一个测试/暂存环境）。

CSS：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

非常感谢你。

Answer 1

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

这是一个有效的例子：

＆＃13;

＆＃13;

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

＆＃13;

<div class="latest-heading">1</div>

＆＃13;

＆＃13;

＆＃13;