创建的三 Angular 形和背景重叠的 CSS 问题

Question

我正在尝试在 wordpress 网站上制作自定义元素。它是指向下一页部分的那些向下的三 Angular 形之一，但它的顶部也有一个数字。

我的问题是，按照我现在的方式，数字会隐藏在上面部分的背景后面，而且我无法让数字/文本保持在顶部，这在通过手机查看时会加剧。更改 z-index 没有帮助。

这是我正在使用的 CSS:

/**在页面中间创建三 Angular 形**/

div.arrow-down-tan {
width: 0; 
height: 0; 
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid #f6f6f6;
position: relative;
left: 50%;
margin-left: -55px;
margin-top: -3%;
padding: 0;
z-index: 2;

/**在三 Angular 形上创建文本**/

div.arrow-text {
    position: absolute;
    left: 50%;
    margin-left: -1.25%;
    top: -8%;
    color: grey;
    font-size: 20px;
    z-index: 10;

}

我正在使用的 html(wordpress 可视化编辑器页面部分中的原始 html - 这也可能是问题的一部分，因为它是前面页面部分的背景覆盖了数字):

<div class="arrow-down-tan"></div>
<div class="arrow-text">3</div>

如有任何帮助，我们将不胜感激。非常感谢!

Answer 1

不确定这是否会在移动设备上完美运行..

https://jsfiddle.net/Hastig/n2w9pv08/

CSS

.d-arrow {
    position: absolute;
    left: 46%;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 30px 0px 30px;
    border-color: #CCCCCC transparent transparent transparent;
    /* background-color: red; */
}

.d-arrow-text {
    position: relative; 
    margin: -35px 0px 0px -7px;
    padding: 0px 0px 0px 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    font-size: 20px; 
    line-height: 20px;
    color: #000000;
    text-shadow: none;
}

html

<div class="d-arrow">
    <div class="d-arrow-text">3</div>
</div>