为什么我不能将文本放在平行四边形中

Question

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

我也尝试解决这个问题，添加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将伪元素放在内容下。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<span>LOREM IPSUM DOLOR</span>

＆＃13;

＆＃13;

＆＃13;