css如何按照不规则显示文字

CSS是一种用来设置网页样式和布局的语言，我们通常使用CSS来设置文字的字体、颜色、大小和排版等。而有时候我们希望实现一些不规则的文字排版效果，如何使用CSS来达到呢？

这里提供两种实现方式：

.text {
  display: inline-block;
  transform: skew(-20deg);
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
}

不规则文字

上面的代码使用了CSS的transform属性中的skew()方法来实现倾斜效果，同时设置背景色和文字颜色，达到不规则显示文字的目的。但是这样的做法有一个缺点，那就是文字会变形，不太符合美观需求。

.text {
  position: relative;
  display: inline-block;
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
}

.text:before,.text:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 20px solid #f00; 
  border-bottom: 20px solid #f00; 
  border-left: 20px solid transparent;
}

.text:before {
  left: -20px;
}

.text:after {
  right: -20px;
}

不规则文字

第二种方式使用了:before和:after伪元素来做边框。这里的:before和:after就是给字体的两边各生成一个三角形的矩形，然后结合position和margin来使生成的矩形与文字合并，最后用border属性来设置边框颜色，呈现出一种不规则显示文字的样式。

总之，只要我们用心去研究，CSS还有很多玩法，只有创意和耐心。以上两种方法只是其中两个例子，如果想要更精美和炫酷的效果，还需要自行摸索，为网页带来更多的惊喜。