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

Question

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

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

这是我正在使用的 css：

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

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;

}

/**在三角形顶部创建文本**/

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>

Answer 2

div.arrow-down-tan {
position: relative;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
}
div.arrow-down-tan:after {
width: 0; 
height: 0; 
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid red;
position: absolute;
left: 50%;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
  content:"";
}

/**to create text ontop of triangle **/

div.arrow-text {
    position: absolute;
    left: 49.5%;
    top: 0;
    color: white;
    font-size: 20px;
    z-index: 10;
}

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