Question

我使用CSS3：after创建自定义形状：三角形顶部的矩形。我需要的文字在矩形内并且应该在三角形的顶部。但是，字母的底部部分被覆盖靠三角形。我想知道是否可以放置文本使用CSS在两个数字之上。

.position   {
border-style: 1px solid red;
z-index:1;
color:white;
font-size:20px;
text-align:center;
background:red;
height: 16px;
width: 32px;
position: relative;
margin: 0 auto;
padding-top:2px;
}

.position:after   {
content: "";
z-index:0;
position: absolute;
top: 18px;
left: 0px;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid red;
}

Answer 1

你的字体大小是20px，你的身高是16px，你的三角形技术上没有覆盖任何东西，没有足够的空间来显示你的文字，因为文字大小太大了你给它的空间量。将盒子的高度增加到字体大小。

http://jsfiddle.net/77af3/3/

.position   {
  border-style: 1px solid red;
  z-index:1;
  color:white;
  font-size:20px;
  text-align:center;
  background:red;
  height: 20px;
  width: 32px;
  position: relative;
  margin: 0 auto;
  padding-top:2px;
}
.position:after   {
  content: "";
  z-index:0;
  position: absolute;
  top: 22px;
  left: 0px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 16px solid red;
}

就我个人而言，我建议不要使用z-index等强制它看起来像渲染一样好。始终确保您放入文本的容器自然足够大以容纳它，否则您将只会遇到其他问题，例如边缘上的一些字母剪切（这是使用z时出现的问题的示例） -index解决方案http://jsfiddle.net/77af3/7/）

Answer 2

将z-index:0更改为z-index:-1

试试这段代码：

<强> fiddle ：

.position   {
    border-style: 1px solid red;
    z-index:1;
    color:white;
    font-size:20px;
    text-align:center;
    background:red;
    height: 16px;
    width: 32px;
    position: relative;
    margin: 0 auto;
    padding-top:2px;
}
.position:after   {
    content: "";
    z-index:-1;
    position: absolute;
    top: 18px;
    left: 0px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid red;
}

Answer 3

您可以使用z-index:-1。但是，这将放在页面中的所有元素后面。

<强> Demo here

或者，您可以使用line-height:value或height:value使文本容器的高度更大，并将:after伪元素放低，以便它不会覆盖文本。

Answer 4

您可以查看以下链接：

Fiddle here

.position   {
border-style: 1px solid red;
z-index:1;
color:white;
font-size:20px;
line-height:15px;
text-align:center;
background:red;
height: 18px;
width: 32px;
position: relative;
margin: 0 auto;

}
.position:after   {
content: "";
z-index:0;
position: absolute;
top: 18px;
left: 0px;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid red;
}

Answer 5

你根本无法按照自己的方式去做。但也有其他选择。

我做到了：

http://jsfiddle.net/77af3/4/

在文本上包裹span，以便您可以更轻松地操作它。我想这对你想要的东西来说已经足够了。

Answer 6

那怎么样？

.position {
    color: transparent;
    position: relative;
    z-index: 2;
    font-size:20px;
    text-align:center;
    width: 32px;
    height: 16px;
    margin: 0 auto;
    padding-top:2px;
    background:red;
}
.position:before   {
    content: "MF";
    color:white;
    width: 32px;
    position: absolute;
    z-index:1;
    top: 1px;
}
.position:after   {
    content: "";
    position: absolute;
    z-index:0;
    top: 16px;
    left: 0px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid red;
}

http://jsfiddle.net/77af3/5/

Answer 7

尝试将z-index放在.position中：在-1之后

.position   {
    border-style: 1px solid red;
    z-index:2;
    color:white;
    font-size:20px;
    text-align:center;
    background:red;
    height: 16px;
    width: 32px;
    position: relative;
    margin: 0 auto;
    padding-top:2px;

}
.position:after   {
    content: "";
    z-index:-1;
    position: absolute;
    top: 18px;
    left: 0px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 16px solid red;
}

.text {
    z-index:100;
}

检查一下：

http://jsfiddle.net/77af3/6/

希望我帮了一下。

如何在CSS自定义形状上放置文本？

7 个答案: