[分享]css3怎么给文字添加斜线

p { font-size: 24px; font-weight: bold; text-align: center; background-color: #ffc107; color: #fff; position: relative; overflow: hidden; } p:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: skew(-30deg); transform-origin: top left; background-color: #b71c1c; z-index: -1; }

如何使用CSS3给文字添加斜线？

p {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background-color: #ffc107;
  color: #fff;
  position: relative;
  overflow: hidden;
}

p:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(-30deg);
  transform-origin: top left;
  background-color: #b71c1c;
  z-index: -1;
} 

如果你正在寻找一种在网页中添加斜线的方式，那么CSS3是你的朋友。使用CSS3的transform属性以及:before伪元素，可以实现轻松添加斜线到文字的效果。 首先，设定一个包含文本的p标签，并设置一些样式，例如背景颜色、文字颜色等等。然后，使用:before伪元素并设置其position为absolute，这样它就可以覆盖在原来的文本之上。 接下来，使用transform属性来让:before斜向倾斜。为了让倾斜的角度更加自然，使用transform-origin属性来设置它的起始点。最后，为:before设置一个背景颜色，并将z-index属性设置为-1，这样它就被放在了原始文本的后面，即斜线覆盖在文字上方。 通过使用以上代码，你将会看到一个具有此效果的斜线文本.