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

Question

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

我的问题是，我现在拥有它的方式，数字隐藏在上面部分的背景之后，并且我无法获得数字/文本保持ontop，当通过移动设备查看时，数字/文本更加恶化。改变Z指数并没有帮助。

这是我使用的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; 

}

/**创建文本ontop的三角形**/

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

}

，我使用的HTML（原始HTML一个WordPress视觉作曲家页面区段内 - 这可能是问题的一部分，以及因为它是被覆盖的数量在前一页部分的背景）：

<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>