Проблема CSS с созданным перекрытием треугольника и фона

Question

Я пытаюсь сделать пользовательский элемент на веб-сайте WordPress. Это один из тех треугольников, указывающих вниз, ведущих в следующий раздел страницы, но он также имеет номер сверху.

Моя проблема в том, что, как у меня сейчас, число скрывается за фоном раздела выше, и я не могу заставить число / текст оставаться на вершине, что усугубляется при просмотре через мобильный телефон. изменение 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;

}

/ ** для создания текста поверх треугольника ** /

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

}

И html, который я использую (необработанный html в разделе страницы WordPress Visual Composer - который также может быть частью проблемы, так как это фон предыдущего раздела страницы, который покрывает число):

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

Любая помощь будет принята с благодарностью. Большое спасибо!

Answer 1

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>

Answer 2

Не уверен, что это будет отлично работать в мобильном телефоне.

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>