創建三角形和背景重疊的CSS問題

我想在wordpress網站上製作一個自定義元素。它是通向下一頁的向下指向的三角形之一，但它也有一個數字。創建三角形和背景重疊的CSS問題

我的問題是，我現在擁有它的方式，數字隱藏在上面部分的背景之後，並且我無法獲得數字/文本保持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>

任何幫助將不勝感激。非常感謝！

來源

2015-04-01 hayleyscg

不知道這是否會在移動工作完全..

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>

來源

2015-04-01 13:16:28

這一個可能更容易定位.. https://jsfiddle.net/Hastig/cskgvqp7/ – 2015-04-01 13:42:50

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>

來源

2015-04-01 13:21:45

請給代碼添加一些解釋，否則它只不過是一組亂碼文本。謝謝 – Sai 2015-04-01 13:28:31

創建三角形和背景重疊的CSS問題

回答

相關問題