[分享]css不规则小标签排版

在网页设计中，不规则小标签排版已经成为一种趋势，能够为网页增加视觉上的吸引力。通过CSS的伪元素选择器，我们可以轻松地实现这种排版效果。.tag { display: inlineblock; : r...

在网页设计中，不规则小标签排版已经成为一种趋势，能够为网页增加视觉上的吸引力。通过CSS的伪元素选择器，我们可以轻松地实现这种排版效果。

.tag {
  display: inline-block;
  position: relative;
  padding: 5px 15px;
  margin-right: 10px;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
}

.tag::before {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #eee;
  border-bottom: 10px solid transparent;
}

.tag::after {
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: -9px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #eee;
  border-bottom: 10px solid transparent;
} 

这段CSS代码可以实现一个简单的不规则小标签效果。我们首先给标签加上一些基本的样式，然后使用伪元素选择器来添加三角形的样式。通过设置top和left属性，我们可以让三角形相对于标签左上角的位置偏移。

如果需要对同一个标签添加多个不规则小标签，可以在CSS中设置多个伪元素选择器来实现。同时，我们也可以通过调整三角形的大小、颜色和位置来实现不同的效果。

需要注意的是，不规则小标签排版虽然增加了视觉上的吸引力，但在过多地使用时会影响文字的可读性。在实际应用中，应该根据具体的场景和需要进行设计。