html - 为什么我不能将文本放在一侧的平行四边形中

Question

我有跨度，我用一侧创建了平行四边形，但我的文字不在跨度区域内，你知道什么是问题吗？

我也尝试通过添加 display:block 来解决这个问题，但没有用 http://jsfiddle.net/46be3tL4/5/

HTML

<span>LOREM IPSUM DOLOR</span>

CSS

span {
    display:block;
    border-top: 100px solid red;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;

}

Answer 1

您添加了边框，而不是背景。

您可以:

• 将边框添加到伪元素而不是元素本身
• 使用绝对定位从文档的正常流中移除伪元素，从而使其与内容重叠。
• 使用负 z-index 将伪元素放置在内容下方。

span {
  display: block;
  position: relative;
  width: 200px;
  min-height: 40px;
}
span:before {
  content: '';
  position: absolute;
  z-index: -1;
  border-top: 40px solid red;
  border-right: 50px solid transparent;
  width: 100%;
}

<span>LOREM IPSUM DOLOR</span>