Question

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

我的问题是我现在拥有它的方式，数字隐藏在上面部分的背景之后，我无法将数字/文本保留在ontop上，这在通过移动设备看到时会加剧。改变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>

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

2 个答案: