html - 如何将文本放在 CSS 自定义形状之上？

Question

http://jsfiddle.net/77af3/

我使用 CSS3 :after 创建自定义形状:三 Angular 形顶部的矩形。我需要的文本在矩形内并且应该在三 Angular 形的顶部。但是，字母的底部被覆盖了由三 Angular 形。我想知道是否可以放置文本使用 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

您的字体大小为 20 像素，高度为 16 像素，从技术上讲，您的三 Angular 形没有覆盖任何东西，只是没有足够的空间来显示您的文本，因为文本大小对于您给它的空间量来说太大了。将框的高度增加到与字体大小相同的高度。

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 时发生的问题的示例-索引解决方案 http://jsfiddle.net/77af3/7/ )